/* Isolated surfaces prevent cards and their children intersecting in 3D. */
.motion-enabled .story-scenes{transform-style:flat;perspective:none;isolation:isolate}
.motion-enabled .story-scene{transform-style:flat;isolation:isolate;contain:layout paint;overflow:hidden;backface-visibility:hidden}
.motion-enabled .story-scene>:not(.scene-label):not(.scene-badge){isolation:isolate;transform-style:flat}
.feature-card,.feature-card.active,.feature-card:hover{background:#45434a!important;transform-style:flat;isolation:isolate;transition:transform 900ms cubic-bezier(.22,.86,.28,1),filter 750ms ease,box-shadow 750ms ease,z-index 0s linear 220ms}
.feature-card::before{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(150deg,#37270f,#13100c 42%,#030303 85%);opacity:0;transition:opacity 680ms ease;pointer-events:none}
.feature-card.active::before{opacity:1}
.feature-card::after,.feature-card:not(.active)::after{content:'';position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 18% 5%,#c68a2633,transparent 70%);opacity:0;transition:opacity 580ms ease;pointer-events:none}
.feature-card.active:hover::after{opacity:1}.feature-card>*{position:relative;z-index:2}.feature-card>.feature-number{position:absolute}
.feature-card .feature-art{opacity:.32;transition:opacity 650ms ease,transform 750ms cubic-bezier(.22,1,.36,1)}.feature-card.active .feature-art{opacity:1}
.feature-card:not(.active){filter:saturate(.35) brightness(.95)}.feature-card.active{filter:saturate(1) brightness(1)}
.feature-card:hover .feature-art>img{transform:rotate(-5deg) translateY(-4px)}
.feature-art .big-symbol,.feature-art>img{transition:transform 750ms cubic-bezier(.22,1,.36,1),filter 650ms ease}
.loyalty,.social,.faq,.contact{background:#08090c;color:#f5f2f8}
.loyalty{overflow:clip;min-height:100svh}.loyalty-card-holder{transform-style:flat;perspective:none;isolation:isolate;overflow:visible}
.loyalty-card,.loyalty-card-holder:hover .loyalty-card{transform:rotate(-4deg);transform-style:flat;isolation:isolate;backface-visibility:hidden}
.loyalty-ghost{transform-style:flat;contain:paint}.loyalty-detail{min-height:90px;align-items:start}.loyalty-detail>div{min-height:88px}.loyalty-detail p{min-height:42px}.loyalty-info{min-height:270px}
.social h2 em,.faq h2 em{color:#ffc329}.social-copy>p:not(.eyebrow){color:#928b9c}.social-points strong{color:#ddd5e6}.social-points p{color:#8b8197}.social-points>div>span{color:#c39744}
.social-demo{background:#141219;border-color:#ffffff10;box-shadow:0 24px 70px #0005;transform-style:flat}
.demo-toolbar strong{color:#e4dceb}.demo-toolbar strong>span{background:#302739;color:#bba8cb}.sample-pill{border-color:#ffffff10;color:#9c8ca9}
.network-tabs{background:#211c28}.network-tabs button{color:#887895}.network-tabs button[aria-selected=true]{background:#33283e;color:#f2e8fa;box-shadow:0 2px 5px #0002}
.comment-card{background:#1d1824;border-color:#ffffff0b}.comment-author strong{color:#e6ddee}.comment-author small{color:#83728e}.comment-card>p{color:#b7a7c3}.avatar{background:#3b294b;color:#d2b3e8}.topic-tags span{background:#30223d;color:#aa90bc}.comment-author .positive-tag{background:#6e9e491c;color:#a6c78c}
.draft-button{background:#4a35151f;border-color:#b47f2a40;color:#edc775}.draft-button:hover{background:#8c64262c}.social-demo-footer{color:#897895}
#reply-text{background:#1d1725;border-color:#ffffff12;color:#c8b8d4}#draft-area label{color:#a28baf}#draft-area small{color:#7f6c8e}
.faq-list details,.faq-list details:first-child{border-color:#ffffff12}.faq-list summary{color:#ded6e5}.faq-list summary>span{color:#a88b58}.faq-list details p{color:#97899f}.faq-list details[data-expanded=false] summary>span{transform:rotate(0)}
.faq-list details{overflow:hidden}.faq-list details p{transform-origin:top}.faq-list details[open]{border-color:#ffffff18}
.contact-glow{background:radial-gradient(ellipse 430px 350px at var(--glow-x,50%) var(--glow-y,88%),#b3761942,transparent 75%);will-change:background}
.social-copy,.social-demo,.contact-inner{will-change:transform,opacity;transition:none!important}
.social-demo .comment-card,.social-demo .draft-button,.social-demo .social-demo-footer{will-change:transform,opacity}
@media(max-width:600px){.loyalty-detail{min-height:95px}.loyalty-detail>div{min-height:95px}.loyalty-detail p{min-height:54px}.loyalty-info{min-height:285px}.motion-enabled .story-scenes{clip-path:none;overflow:visible}.motion-enabled .story-scene{contain:layout paint}.contact-glow{background:radial-gradient(ellipse 300px 320px at var(--glow-x,50%) var(--glow-y,88%),#b3761942,transparent 75%)}}
@media(prefers-reduced-motion:reduce){.feature-card,.feature-card::before,.feature-card::after{transition:none!important}.social-copy,.social-demo,.contact-inner,.social-demo .comment-card,.social-demo .draft-button,.social-demo .social-demo-footer{opacity:1!important;transform:none!important}}

/* Compact fan: preserve the hover lighting, replace sliding with a lifted orbit. */
#feature-carousel{height:380px}
#feature-carousel .feature-card{width:clamp(290px,29vw,400px);height:350px;padding:27px;border-radius:26px;transition:filter 750ms ease,box-shadow 750ms ease,z-index 0s linear 220ms}
#feature-carousel .feature-art{height:128px;margin-bottom:18px}
#feature-carousel .feature-art>img{width:96px;height:96px}
#feature-carousel .big-symbol{font-size:83px}
#feature-carousel h3{font-size:23px;line-height:1.15;letter-spacing:-.7px;margin-bottom:12px}
#feature-carousel p{font-size:14px;line-height:1.65}
.carousel-controls>.circle-button{top:-210px}
#feature-prev{left:max(16px,calc(50% - 490px))}#feature-next{right:max(16px,calc(50% - 490px))}
.motion-enabled .how{height:calc(var(--motion-vh,100vh) * 5.6)}
@media(min-width:801px){.motion-enabled .story-layout{inset:132px 0 60px}.motion-enabled .story-scenes{width:min(100% + 8vw,680px);height:min(100%,500px);justify-self:start;align-self:center;margin-left:6%}}

/* The light is a complete viewport orb, never a gradient clipped by a section. */
.contact-glow.contact-halo{position:fixed;inset:auto;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle at 50% 50%,#bb7c1b42 0%,#87541029 25%,#51320d15 48%,transparent 72%)!important;z-index:1;pointer-events:none;mix-blend-mode:screen;will-change:left,top,opacity}

/* A raised front surface and a separate back plane give the handoff thickness. */
@media(max-width:800px){#feature-carousel .feature-card{width:330px;height:330px;padding:25px}#feature-carousel{height:360px}#feature-carousel .feature-art{height:112px}#feature-carousel h3{font-size:22px}#feature-carousel p{font-size:13px}.carousel-controls>.circle-button{top:-200px}}
@media(max-width:600px){#feature-carousel .feature-card{width:min(78vw,310px);height:330px;padding:24px}#feature-carousel .feature-art{height:110px;margin-bottom:16px}#feature-carousel .feature-art>img{width:88px;height:88px}#feature-carousel .big-symbol{font-size:76px}#feature-carousel h3{font-size:21px}#feature-carousel p{font-size:12px}#feature-prev{left:8px}#feature-next{right:8px}.motion-enabled .how{height:calc(var(--motion-vh,100svh) * 5.5)}}
/* A typed signal becomes the section marker; no decorative coin. */
.brand-coin{display:none!important}
.motion-enabled .statement h2{margin-left:0;width:100%}
.statement-trace{height:2px;width:var(--trace-width,68%);margin-top:28px;position:relative;background:#e9e1cf;transform-origin:left}
.statement-trace i{position:absolute;inset:0;background:linear-gradient(90deg,#e7bd68,#b58228);transform:scaleX(var(--trace,0));transform-origin:left}
.statement-trace b{position:absolute;width:8px;height:8px;border-radius:50%;background:#b58228;box-shadow:0 0 0 7px #d6a64112;left:calc(var(--trace,0)*100%);top:-3px}
.signal-field{position:absolute;inset:0;pointer-events:none;overflow:visible;transform-origin:center;opacity:0;background:radial-gradient(ellipse at 70% 60%,#e9c57715,transparent 55%);perspective:900px}
.signal-field svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:#c5994340;stroke-width:1;stroke-dasharray:1800;stroke-dashoffset:calc(1800 - var(--signal-progress,0)*1800)}
.signal-field span{position:absolute;padding:9px 14px;border:1px solid #c4983c1c;background:#fffcf6;color:#b99a61;letter-spacing:3px;font-size:8px;box-shadow:0 8px 25px #ae7a1206;transform:translateY(var(--signal-travel,0));border-radius:40px}
.signal-field span:nth-of-type(1){left:9%;top:16%}.signal-field span:nth-of-type(2){right:8%;top:63%}.signal-field span:nth-of-type(3){left:40%;top:80%}
#features>.section-heading{will-change:opacity,transform;transition:none!important}
/* Every illustration and symbol shares the same gentle hover turn. */
.feature-art .big-symbol{display:inline-block;transform:rotate(-9deg)}
.feature-card:hover .feature-art>.big-symbol{transform:rotate(-4deg) translateY(-4px)}
.feature-card .feature-art>img,.feature-card .feature-art>.big-symbol{transition:transform 1050ms cubic-bezier(.35,0,.15,1),filter 800ms ease}
#feature-carousel .feature-card{transition:filter 1100ms ease,box-shadow 1100ms ease}
.feature-card::before{transition:opacity 1050ms ease}.feature-card .feature-art{transition:opacity 1050ms ease,transform 1050ms ease}
/* Unfocused light belongs to the document, so scrolling cannot drag it. */
.contact-glow.contact-halo{position:absolute!important}
/* Cinematic two-sided card with a real, branded reverse face. */
.cinema-backdrop{position:fixed;inset:64px 0 0;z-index:92;pointer-events:none}
.cinema-card{position:fixed;z-index:95;pointer-events:none;transform-style:preserve-3d;transform-origin:center;border-radius:28px;will-change:transform,width,height,top,left}
.cinema-rotor{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.cinema-front,.cinema-back{position:absolute;inset:0;border-radius:28px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 30px 65px #0003}
.cinema-front{overflow:hidden;transform:translateZ(1px);isolation:isolate}
.cinema-front>.cinema-source,.cinema-front>.cinema-target{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;transform:none!important;translate:none!important;border-radius:inherit!important;box-shadow:none!important;pointer-events:none!important;transition:none!important;backface-visibility:visible!important}
.cinema-front>.cinema-target{background:transparent!important}.cinema-target::before{animation:none!important}
.cinema-back{transform:rotateY(180deg) translateZ(1px);background:radial-gradient(ellipse at 35% 20%,#c0d4ad,#91b28a 65%,#789c75);display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden;border:1px solid #d5e7cb}
.cinema-back>img{width:27%;height:27%;object-fit:contain;filter:brightness(0) saturate(100%);opacity:.55;mix-blend-mode:soft-light;z-index:2}
.cinema-back>span{font-size:11px;letter-spacing:5px;color:#305337;margin-top:24px;z-index:2}.cinema-back>small{font-size:6px;letter-spacing:2px;color:#3f6545;margin-top:14px;z-index:2}
.emblem-orbit{position:absolute;width:62%;aspect-ratio:1;border:1px solid #39644326;border-radius:50%;box-shadow:0 0 0 30px #39644309,0 0 0 60px #39644306}
@media(max-width:600px){.cinema-backdrop{top:66px}.signal-field span{font-size:6px;padding:7px 10px;letter-spacing:2px}.statement-trace{margin-top:20px}.cinema-back>span{font-size:8px;letter-spacing:3px}.cinema-back>small{font-size:5px;letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){.signal-field,.statement-trace{display:none}.cinema-card,.cinema-backdrop{display:none!important}#features>.section-heading{opacity:1!important;transform:none!important}}

.cinema-back>img{filter:brightness(0) saturate(100%) invert(22%) sepia(18%) saturate(1362%) hue-rotate(82deg) brightness(85%) contrast(90%);opacity:1;mix-blend-mode:multiply}
@media(max-width:600px){.motion-enabled .story-layout{top:151px}}

/* Hover owns the inner icon; selection animates its outer artwork independently. */
#feature-carousel .feature-card .feature-art>img,#feature-carousel .feature-card .feature-art>.big-symbol{transform:perspective(600px) rotateY(0deg) rotateZ(-9deg) translateY(0) scale(1);transition:transform 850ms cubic-bezier(.3,0,.2,1),filter 800ms ease;will-change:transform}
#feature-carousel .feature-card:hover .feature-art>img,#feature-carousel .feature-card:hover .feature-art>.big-symbol{transform:perspective(600px) rotateY(22deg) rotateZ(5deg) translateY(-5px) scale(1.035)}
.cinema-back>img{backface-visibility:visible;transform:translateZ(2px)}
@media(prefers-reduced-motion:reduce){#feature-carousel .feature-card .feature-art>img,#feature-carousel .feature-card .feature-art>.big-symbol{transition:none!important}}

/* Feature icons: no hover tilt, larger size */
#feature-carousel .feature-card:hover .feature-art>img{transform:perspective(600px) rotateY(0deg) rotateZ(-9deg) translateY(0) scale(1)}
#feature-carousel .feature-art{height:132px}
#feature-carousel .feature-art>img{width:128px;height:128px}
@media(max-width:800px){#feature-carousel .feature-art{height:116px}#feature-carousel .feature-art>img{width:112px;height:112px}}
@media(max-width:600px){#feature-carousel .feature-art{height:112px}#feature-carousel .feature-art>img{width:108px;height:108px}}

/* Apple-style smooth card transitions: matching ease-out curve, shorter fades */
.feature-card::before,.feature-card::after{transition:opacity 600ms cubic-bezier(.32,.72,0,1)!important}
#feature-carousel .feature-card{transition:filter 600ms cubic-bezier(.32,.72,0,1),box-shadow 600ms cubic-bezier(.32,.72,0,1)!important}
#feature-carousel .feature-card .feature-art{transition:opacity 600ms cubic-bezier(.32,.72,0,1)!important}

/* Laptop workflow: labels and arrows follow the lid as it opens (painted by motion.js), so no timed transitions */
.flow-label,.dashboard-stage.is-open .flow-label,.workflow-arrow,.dashboard-stage.is-open .workflow-arrow{transition:none!important}
@media(prefers-reduced-motion:reduce){.flow-label{filter:none}}

/* Pillar icons (Regen Icons, MIT) */
.pillar-mark svg{width:26px;height:26px;stroke-width:1.75}
@media(max-width:600px){.pillar-mark svg{width:22px;height:22px}}
.pillar-mark svg{stroke-width:1.6;color:#b97e13}

/* Generated orange-and-cream 3D icons for the four platform capabilities. */
.platform-pillars .pillar-mark{width:80px;height:80px;background:transparent;border-radius:0}
.platform-pillars .pillar-mark img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:600px){.platform-pillars .pillar-mark{width:64px;height:64px}}


/* ---------- How it works -> Loyalty: the dark Loyalty sheet slides up over the pinned cards (motion.js dims them) ---------- */
/* The extra height keeps the last card on screen for a moment before the sheet arrives. */
.motion-enabled .how{height:calc(var(--motion-vh,100vh) * 6.2)}
.motion-enabled #loyalty{position:relative;z-index:5;margin-top:calc(var(--motion-vh,100vh) * -1);border-radius:48px 48px 0 0}
.motion-enabled .how-stage{transform-origin:50% 45%}
.motion-enabled .how-pin::after{content:"";position:absolute;inset:0;z-index:60;background:#08090c;opacity:var(--how-dim,0);pointer-events:none}
@media(max-width:800px){.motion-enabled #loyalty{border-radius:36px 36px 0 0}}
@media(max-width:600px){.motion-enabled #loyalty{border-radius:28px 28px 0 0}}

/* Section rhythm around Social: the loyalty checklist is gone, so its reserved height goes too,
   and Social sits about one section-gap from Loyalty above and the FAQ below. */
.loyalty-info{min-height:0}
.loyalty{padding-bottom:96px}
.social{padding-top:44px;padding-bottom:110px}
@media(max-width:600px){
  .loyalty{padding-bottom:44px}
  .social{padding-top:36px;padding-bottom:110px}
}