/* Clairen Haus — Commons product page (/commons). Builds on home.css (tokens, header, footer, buttons). */

.nav-list a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--rose); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Hero */
.cm-hero { position: relative; overflow: hidden; padding: 4.5rem 0 4rem; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--ivory) 0%, var(--blush-soft) 100%); }
.cm-hero-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3rem; align-items: center; }
.cm-hero h1 { font-size: clamp(2.25rem, 4.4vw, 3.5rem); letter-spacing: -.01em; margin-bottom: 1.4rem; }
.cm-hero h1 em { font-style: normal; color: var(--bronze); }
.cm-hero .lead { max-width: 34rem; }
.cm-hero-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.cm-hero-note { margin-top: 1.5rem; font-size: .975rem; color: var(--text-soft); }
.cm-hero-note strong { color: var(--espresso); font-weight: 500; }

.cm-art { --rose-deep: #A9767F; --ease: cubic-bezier(.22,.8,.24,1); position: relative; display: grid; place-items: center; min-height: 620px; }

/* Ad video (self-contained: delete the .cm-video section in commons.html to drop it) */
.cm-video { background: var(--espresso); color: var(--ivory); }
.cm-video-inner { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 4rem; align-items: center; justify-content: center; }
.cm-video-frame { margin: 0; width: 100%; max-width: 360px; justify-self: center; }
.cm-video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 18px; background: #2A1F1A; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.cm-video .eyebrow { color: var(--blush); }
.cm-video h2 { color: var(--ivory); font-size: clamp(1.75rem, 2.8vw, 2.25rem); margin-bottom: 1rem; }
.cm-video p { color: #E9DED8; font-size: 1.125rem; max-width: 32rem; }
.cm-video .btn-primary { margin-top: 2rem; background: var(--ivory); color: var(--espresso); border-color: var(--ivory); }
.cm-video .btn-primary:hover { background: var(--blush); border-color: var(--blush); color: var(--espresso); }

/* Problem cards */
.cm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.cm-card { background: #fff; border: 1px solid var(--blush); border-radius: 8px; padding: 2rem; }
.cm-card::before { content: ""; display: block; width: 28px; height: 2px; background: var(--rose); margin-bottom: 1.1rem; }
.cm-card h3 { font-size: 1.25rem; margin-bottom: .6rem; }
.cm-card p { color: var(--text-soft); }
.cm-card sup a { text-decoration: none; font-weight: 600; }

/* Features */
.cm-features-sec { background: var(--ivory-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cm-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.cm-features li { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 1.35rem 1.5rem 1.35rem 3.1rem; }
.cm-features li::before { content: ""; position: absolute; left: 1.4rem; top: 1.85rem; width: 9px; height: 9px; border-radius: 50%; background: var(--rose); }
.cm-features strong { display: block; font-weight: 500; color: var(--espresso); font-size: 1.0625rem; margin-bottom: .2rem; }
.cm-features span { display: block; color: var(--text-soft); font-size: 1rem; line-height: 1.6; }

/* Pricing */
.cm-pricing { background: var(--ivory); }
.cm-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; }
.cm-plan { display: flex; flex-direction: column; min-width: 0; padding: 2.25rem; background: #fff; border: 1px solid var(--blush); border-radius: 10px; }
.cm-plan--main { background: var(--espresso); border-color: var(--espresso); color: var(--ivory); }
.cm-plan-tag { align-self: flex-start; margin-bottom: 1.1rem; padding: .2rem .75rem; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; background: var(--blush-soft); border: 1px solid var(--blush); color: var(--espresso); }
.cm-plan--main .cm-plan-tag { background: var(--rose); border-color: var(--rose); color: var(--espresso); }
.cm-plan h3 { font-size: 1.5rem; margin-bottom: .4rem; }
.cm-plan--main h3 { color: var(--ivory); }
.cm-plan-sub { color: var(--text-soft); }
.cm-plan--main .cm-plan-sub { color: #E9DED8; }
.cm-price { margin: 1.5rem 0 .25rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; }
.cm-price-big { font-size: clamp(2.5rem, 4vw, 3rem); font-weight: 500; line-height: 1; letter-spacing: -.01em; color: var(--espresso); }
.cm-plan--main .cm-price-big { color: var(--ivory); }
.cm-price-unit { font-size: 1rem; color: var(--text-soft); }
.cm-plan--main .cm-price-unit { color: #E9DED8; }
.cm-price-plus { font-size: 1.125rem; font-weight: 500; color: var(--espresso); }
.cm-plan--main .cm-price-plus { color: var(--blush); }
.cm-plan-list { list-style: none; margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--line); }
.cm-plan--main .cm-plan-list { border-top-color: rgba(233, 212, 214, .3); }
.cm-plan-list li { position: relative; padding-left: 1.35rem; font-size: 1rem; line-height: 1.6; }
.cm-plan-list li + li { margin-top: .55rem; }
.cm-plan-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--rose); }
.cm-plan-list li.cm-no::before { background: transparent; border: 1.5px solid var(--taupe); }
.cm-plan-cta { margin-top: auto; padding-top: 2rem; display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.cm-plan-cta .btn { width: 100%; }
.cm-plan--main .btn-primary { background: var(--ivory); color: var(--espresso); border-color: var(--ivory); }
.cm-plan--main .btn-primary:hover { background: var(--blush); border-color: var(--blush); color: var(--espresso); }
.cm-plan-fine { font-size: .9375rem; color: var(--text-soft); }
.cm-plan--main .cm-plan-fine { color: #E9DED8; }
.cm-plan--main a:not(.btn) { color: var(--blush); }
.cm-pricing-note { margin-top: 1.5rem; color: var(--text-soft); font-size: 1rem; max-width: 46rem; }

/* Steps */
.cm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; counter-reset: cm; }
.cm-steps li { counter-increment: cm; }
.cm-steps li::before { content: counter(cm); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 1rem; border-radius: 50%; background: var(--blush); color: var(--espresso); font-size: 1.15rem; font-weight: 500; }
.cm-steps h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.cm-steps p { color: var(--text-soft); }

/* FAQ */
.cm-faq-sec { background: var(--blush-soft); border-top: 1px solid var(--line); }
.cm-faq { max-width: 50rem; }
.cm-faq details { border-top: 1px solid var(--blush); }
.cm-faq details:last-child { border-bottom: 1px solid var(--blush); }
.cm-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 56px; padding: .85rem 0; font-weight: 500; font-size: 1.0625rem; color: var(--espresso); }
.cm-faq summary::-webkit-details-marker { display: none; }
.cm-faq summary::after { content: "+"; flex: none; font-size: 1.5rem; line-height: 1; color: var(--bronze); }
.cm-faq details[open] summary::after { content: "–"; }
.cm-faq details p { padding: 0 0 1.25rem; color: var(--text-soft); max-width: 44rem; }

/* Closing CTA */
.cm-close { background: var(--ivory-deep); border-top: 1px solid var(--line); text-align: center; }
.cm-close h2 { font-size: clamp(1.75rem, 2.8vw, 2.25rem); margin-bottom: 1rem; }
.cm-close p { color: var(--text-soft); font-size: 1.125rem; max-width: 36rem; margin: 0 auto; }
.cm-close-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.75rem; }
.cm-close .cm-sources { margin: 3.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .875rem; line-height: 1.6; color: var(--text-soft); max-width: 50rem; text-align: left; }

/* App mockup (animated, 10 s loop) */
.cm-art .orb{position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
.cm-art .o1{width:440px;height:440px;left:50%;top:50%;margin:-300px 0 0 -330px;background:radial-gradient(circle at 50% 50%,rgba(199,154,161,.55) 0%,rgba(199,154,161,0) 68%);animation:cm-drift1 16s ease-in-out infinite alternate}
.cm-art .o2{width:380px;height:380px;left:50%;top:50%;margin:-60px 0 0 -40px;background:radial-gradient(circle,rgba(233,212,214,.95) 0%,rgba(233,212,214,0) 70%);animation:cm-drift2 19s ease-in-out infinite alternate}
.cm-art .o3{width:300px;height:300px;left:50%;top:50%;margin:-260px 0 0 20px;background:radial-gradient(circle,rgba(179,154,134,.38) 0%,rgba(179,154,134,0) 70%);animation:cm-drift3 23s ease-in-out infinite alternate}
@keyframes cm-drift1{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(60px,50px,0) scale(1.12)}}
@keyframes cm-drift2{0%{transform:translate3d(0,0,0) scale(1.05)}100%{transform:translate3d(-70px,-40px,0) scale(.92)}}
@keyframes cm-drift3{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-40px,70px,0) scale(1.15)}}
/* phone mockup */
.cm-art .mock{position:relative;z-index:1;margin:0;width:284px;height:590px;padding:10px;border-radius:44px;background:linear-gradient(145deg,#4a3830,#2A1F1A);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 40px 80px -30px rgba(62,47,40,.55),0 18px 36px -18px rgba(62,47,40,.35)}
.cm-art .mock::after{content:"";position:absolute;top:18px;left:50%;width:76px;height:20px;margin-left:-38px;border-radius:12px;background:#1d1512;z-index:5}
.cm-art .mock-screen{position:relative;width:264px;height:570px;border-radius:34px;overflow:hidden;background:var(--ivory);font-family:var(--font);color:var(--espresso);line-height:1.35;transform:translateZ(0)}
.cm-art .m-c{position:absolute;inset:0;animation:cm-mc 10s linear infinite}
.cm-art .m-c *{animation-duration:10s;animation-iteration-count:infinite;animation-timing-function:var(--ease)}
.cm-art .m-status{position:absolute;top:0;left:0;right:0;height:46px;display:flex;justify-content:space-between;align-items:center;padding:4px 26px 0;font-size:11px;font-weight:600}
.cm-art .m-sig{display:flex;gap:2px;align-items:flex-end}.cm-art .m-sig i{display:block;width:3px;background:var(--espresso);border-radius:1px}.cm-art .m-sig i:nth-child(1){height:5px}.cm-art .m-sig i:nth-child(2){height:7px}.cm-art .m-sig i:nth-child(3){height:9px}
.cm-art .m-bar{position:absolute;top:46px;left:0;right:0;height:42px;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--line)}
.cm-art .m-logo{width:26px;height:26px;border-radius:50%;background:var(--rose);color:var(--ivory);display:grid;place-items:center;font-size:13px;font-weight:600}
.cm-art .m-title{font-size:13px;font-weight:600;flex:1;white-space:nowrap}
.cm-art .m-coins{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;background:var(--ivory-deep);border-radius:20px;padding:3px 8px 3px 4px}
.cm-art .coin{width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f3dcc4,#b98a5f 70%);box-shadow:0 0 0 1px rgba(122,91,63,.35) inset}
.cm-art .m-bell{position:relative;width:20px;height:20px;color:var(--espresso)}
.cm-art .m-bell svg{width:20px;height:20px;fill:currentColor}
.cm-art .m-badge{position:absolute;top:-4px;right:-5px;min-width:14px;height:14px;border-radius:7px;background:var(--rose-deep);color:#fff;font-size:9px;font-weight:600;display:grid;place-items:center;transform:scale(0);animation-name:cm-pop2}
.cm-art .m-online{position:absolute;top:96px;left:14px;right:14px;height:30px;display:flex;align-items:center;justify-content:space-between}
.cm-art .m-lbl{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-soft);font-weight:600;display:flex;align-items:center;gap:5px}
.cm-art .m-lbl::before{content:"";width:6px;height:6px;border-radius:50%;background:#7fae8a;box-shadow:0 0 0 3px rgba(127,174,138,.2)}
.cm-art .m-avs{display:flex;align-items:center}
.cm-art .av{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-style:normal;font-size:9.5px;font-weight:600;color:var(--ivory);border:2px solid var(--ivory);flex:none}
.cm-art .m-avs .av{margin-left:-7px;opacity:0;transform:scale(.4);animation-name:cm-avin}
.cm-art .a1{background:var(--bronze)}.cm-art .a2{background:var(--rose)}.cm-art .a3{background:var(--taupe)}.cm-art .a4{background:var(--espresso)}.cm-art .a5{background:var(--rose-deep)}
.cm-art .m-avs .a1{animation-name:cm-av1}.cm-art .m-avs .a2{animation-name:cm-av2}.cm-art .m-avs .a3{animation-name:cm-av3}.cm-art .m-avs .a4{animation-name:cm-av4}.cm-art .m-avs .a5{animation-name:cm-av5}
.cm-art .m-more{font-style:normal;font-size:10px;font-weight:600;color:var(--text-soft);margin-left:5px;opacity:0;animation-name:cm-av6}

.cm-art .m-feed{position:absolute;top:134px;left:0;right:0;bottom:56px;overflow:hidden;padding:0 10px}
.cm-art .m-list{position:relative;animation-name:cm-list}
.cm-art .post{position:absolute;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 11px;box-shadow:0 6px 16px -12px rgba(62,47,40,.35);opacity:0}
.cm-art .pa{top:0;height:122px;animation-name:cm-pa}
.cm-art .pb{top:132px;height:156px;animation-name:cm-pb}
.cm-art .pe{top:298px;height:74px;display:flex;align-items:center;gap:10px;animation-name:cm-pe;background:linear-gradient(135deg,#fff 0%,var(--blush-soft) 100%)}
.cm-art .p-hd{display:flex;align-items:center;gap:7px}
.cm-art .p-hd .av{width:24px;height:24px;border:0;font-size:9px}
.cm-art .av-host{background:var(--espresso)}
.cm-art .p-name{font-size:11.5px;font-weight:600;flex:1;display:flex;align-items:center;gap:5px}
.cm-art .chip{font-style:normal;font-size:8.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:1px 6px;border-radius:10px;background:var(--blush);color:var(--espresso)}
.cm-art .chip.lv{background:var(--ivory-deep);color:var(--bronze)}
.cm-art .p-time{font-size:9.5px;color:var(--taupe)}
.cm-art .p-tx{margin:7px 0 8px;font-size:11px;color:var(--text-soft);line-height:1.42}
.cm-art .p-ft{display:flex;gap:14px}
.cm-art .react{position:relative;display:flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;color:var(--text-soft)}
.cm-art .react svg{width:14px;height:14px;fill:var(--taupe)}
.cm-art .hrt svg{animation-name:cm-heart;transform-origin:50% 60%}
.cm-art .burst{position:absolute;left:-5px;top:-5px;width:24px;height:24px;border-radius:50%;border:2px solid var(--rose);opacity:0;transform:scale(.3);animation-name:cm-burst}
.cm-art .roll{display:inline-block;height:1.25em;line-height:1.25em;overflow:hidden;vertical-align:bottom}
.cm-art .roll .col{display:flex;flex-direction:column}
.cm-art .roll .col span{height:1.25em}
.cm-art .r-like .col{animation-name:cm-rlike}
.cm-art .r-coin .col{animation-name:cm-rcoin}
.cm-art .r-go .col{animation-name:cm-rgo}
.cm-art .p-reply{position:relative;display:flex;align-items:center;gap:6px;margin-top:2px;padding-top:9px;border-top:1px solid var(--line);height:38px}
.cm-art .av.sm{width:20px;height:20px;font-size:8px;border:0;opacity:0;animation-name:cm-rpav}
.cm-art .bub{position:absolute;left:26px;top:9px;background:var(--ivory-deep);border-radius:12px 12px 12px 4px;font-size:10.5px;padding:5px 10px;color:var(--espresso)}
.cm-art .typing{display:flex;gap:3px;padding:8px 10px;opacity:0;animation-name:cm-typing}
.cm-art .typing i{width:4px;height:4px;border-radius:50%;background:var(--taupe);animation:cm-dot .9s ease-in-out infinite!important}
.cm-art .typing i:nth-child(2){animation-delay:.15s!important}.cm-art .typing i:nth-child(3){animation-delay:.3s!important}
.cm-art .said{opacity:0;transform:translateY(6px);animation-name:cm-said}
.cm-art .e-tile{flex:none;width:46px;height:50px;border-radius:10px;background:var(--espresso);color:var(--ivory);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;font-weight:600;line-height:1.1}
.cm-art .e-tile b{font-size:8px;letter-spacing:.12em;color:var(--rose);font-weight:600;margin-bottom:2px}
.cm-art .e-info{flex:1;display:flex;flex-direction:column;font-size:10px;color:var(--text-soft);min-width:0}
.cm-art .e-info strong{font-size:11.5px;color:var(--espresso);font-weight:600}
.cm-art .e-btn{position:relative;flex:none;width:62px;height:28px;font-size:10.5px;font-weight:600}
.cm-art .e-btn>span{position:absolute;inset:0;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:3px}
.cm-art .e-rsvp{background:var(--espresso);color:var(--ivory);animation-name:cm-rsvp}
.cm-art .e-going{background:var(--blush);color:var(--espresso);opacity:0;transform:scale(.8);animation-name:cm-going}
.cm-art .e-going svg{width:11px;height:11px}
.cm-art .m-tabs{position:absolute;left:0;right:0;bottom:0;height:56px;padding-bottom:10px;display:flex;justify-content:space-around;align-items:center;border-top:1px solid var(--line);background:rgba(250,248,245,.96)}
.cm-art .m-tabs span{width:22px;height:22px;color:var(--taupe)}
.cm-art .m-tabs svg{width:22px;height:22px;fill:currentColor}
.cm-art .m-tabs .on{color:var(--rose-deep)}
.cm-art .m-toast{position:absolute;top:50px;left:10px;right:10px;height:56px;border-radius:16px;background:var(--espresso);color:var(--ivory);display:flex;align-items:center;gap:10px;padding:0 12px;box-shadow:0 18px 30px -14px rgba(42,31,26,.7);opacity:0;transform:translateY(-80px) scale(.96);animation-name:cm-toast;overflow:hidden}
.cm-art .m-toast::after{content:"";position:absolute;top:0;bottom:0;width:60px;left:-80px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);animation-name:cm-tsheen;animation-timing-function:linear}
.cm-art .t-star{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#e7c2b4,#b7787f 55%,#8c5a43);box-shadow:0 0 0 3px rgba(199,154,161,.25)}
.cm-art .t-star svg{width:17px;height:17px;fill:#fff}
.cm-art .t-tx{display:flex;flex-direction:column;font-size:10px;color:var(--blush);min-width:0}
.cm-art .t-tx strong{font-size:11.5px;color:var(--ivory);font-weight:600;white-space:nowrap;letter-spacing:-.005em}

/* 10 s loop */
@keyframes cm-mc{0%{opacity:0}3%{opacity:1}94%{opacity:1}98%,100%{opacity:0}}
@keyframes cm-av1{0%,3%{opacity:0;transform:scale(.4)}7%,100%{opacity:1;transform:none}}
@keyframes cm-av2{0%,5%{opacity:0;transform:scale(.4)}9%,100%{opacity:1;transform:none}}
@keyframes cm-av3{0%,7%{opacity:0;transform:scale(.4)}11%,100%{opacity:1;transform:none}}
@keyframes cm-av4{0%,9%{opacity:0;transform:scale(.4)}13%,100%{opacity:1;transform:none}}
@keyframes cm-av5{0%,11%{opacity:0;transform:scale(.4)}15%,100%{opacity:1;transform:none}}
@keyframes cm-av6{0%,13%{opacity:0;transform:translateX(-4px)}17%,100%{opacity:1;transform:none}}
@keyframes cm-pa{0%,9%{opacity:0;transform:translateY(18px) scale(.98)}15%,100%{opacity:1;transform:none}}
@keyframes cm-heart{0%,22%{transform:scale(1);fill:var(--taupe)}25%{transform:scale(1.45);fill:var(--rose-deep)}29%,100%{transform:scale(1);fill:var(--rose-deep)}}
@keyframes cm-burst{0%,22.5%{opacity:0;transform:scale(.3)}24%{opacity:.9}29%,100%{opacity:0;transform:scale(1.5)}}
@keyframes cm-rlike{0%,23%{transform:translateY(0)}25%,27.5%{transform:translateY(-1.25em)}29.5%,32%{transform:translateY(-2.5em)}34%,100%{transform:translateY(-3.75em)}}
@keyframes cm-pb{0%,30%{opacity:0;transform:translateY(18px) scale(.98)}36%,100%{opacity:1;transform:none}}
@keyframes cm-rpav{0%,40%{opacity:0}43%,100%{opacity:1}}
@keyframes cm-typing{0%,41%{opacity:0;transform:scale(.8)}43%,48%{opacity:1;transform:none}49.5%,100%{opacity:0;transform:none}}
@keyframes cm-said{0%,48.5%{opacity:0;transform:translateY(6px)}52%,100%{opacity:1;transform:none}}
@keyframes cm-toast{0%,55%{opacity:0;transform:translateY(-80px) scale(.96)}59.5%,70%{opacity:1;transform:none}74%,100%{opacity:0;transform:translateY(-80px) scale(.96)}}
@keyframes cm-tsheen{0%,60%{transform:translateX(0)}66%,100%{transform:translateX(420px)}}
@keyframes cm-rcoin{0%,61%{transform:translateY(0)}64%,100%{transform:translateY(-1.25em)}}
@keyframes cm-list{0%,72%{transform:translateY(0)}79%,100%{transform:translateY(-78px)}}
@keyframes cm-pe{0%,74%{opacity:0;transform:translateY(22px) scale(.98)}80%,100%{opacity:1;transform:none}}
@keyframes cm-pop2{0%,80%{transform:scale(0)}83%{transform:scale(1.25)}85%,100%{transform:scale(1)}}
@keyframes cm-rsvp{0%,85%{opacity:1;transform:none}87%,100%{opacity:0;transform:scale(.9)}}
@keyframes cm-going{0%,85.5%{opacity:0;transform:scale(.8)}88.5%,100%{opacity:1;transform:none}}
@keyframes cm-rgo{0%,86%{transform:translateY(0)}88.5%,100%{transform:translateY(-1.25em)}}
@keyframes cm-dot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-3px);opacity:1}}

@media (prefers-reduced-motion: reduce) {
  .cm-art .orb, .cm-art .m-c, .cm-art .m-c * { animation: none !important; }
  .cm-art .m-avs .av, .cm-art .m-more, .cm-art .post, .cm-art .av.sm, .cm-art .said, .cm-art .e-going { opacity: 1 !important; transform: none !important; }
  .cm-art .e-rsvp, .cm-art .typing, .cm-art .m-toast, .cm-art .burst { opacity: 0 !important; }
  .cm-art .m-badge { transform: none !important; }
}

@media (max-width: 1080px) {
  .cm-hero-inner { gap: 2rem; }
  .cm-video-inner { gap: 3rem; }
}
@media (max-width: 960px) {
  .cm-hero-inner { grid-template-columns: 1fr; }
  .cm-art { min-height: 0; padding: 1rem 0 0; }
  .cm-cards { grid-template-columns: 1fr; gap: 1rem; }
  .cm-steps { grid-template-columns: 1fr; gap: 1.75rem; }
}
@media (max-width: 820px) {
  .cm-video-inner { grid-template-columns: 1fr; gap: 2.25rem; }
  .cm-video-copy { text-align: left; }
  .cm-features { grid-template-columns: 1fr; }
  .cm-plans { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cm-hero { padding: 2.75rem 0 3rem; }
  .cm-hero h1 { font-size: 2.125rem; }
  .cm-hero-actions .btn { width: 100%; }
  .cm-art { overflow: hidden; margin: 0 -1.25rem; padding-bottom: 1rem; }
  .cm-video-frame { max-width: 300px; }
  .cm-video .btn-primary { width: 100%; }
  .cm-card { padding: 1.5rem 1.25rem; }
  .cm-features li { padding: 1.15rem 1.15rem 1.15rem 2.6rem; }
  .cm-features li::before { left: 1.1rem; top: 1.65rem; }
  .cm-plan { padding: 1.75rem 1.25rem; }
  .cm-close-actions .btn { width: 100%; }
}