/* A live hero: the product itself, playing, in place of a still icon (owner, 2026-10-09: visual first, "the motion is super good").
   One file, byte-identical in CRM, Commerce, Games, Tools and Fables (test/venture-tints.test.js). The motion kit (motion.js data-cycle)
   only toggles .is-on; everything that moves is here. Without the script, or with reduced motion, it is a still, complete picture. */
.hl{position:relative;display:grid;place-items:center;min-height:440px;margin:0;padding:56px clamp(18px,4vw,44px) 54px;border:1px solid #ead9cd;border-radius:16px;background:#fff1e6;overflow:hidden;color:#241f1b;font-style:normal}
.hl:before{content:"";position:absolute;inset:0 0 auto;height:12px;background:#f07832}
.hl-card{position:relative;width:100%;max-width:430px;background:#fff;border:1px solid #ead9cd;border-radius:16px;box-shadow:0 22px 44px -18px rgba(96,48,14,.28);animation:hl-float 7s ease-in-out infinite}
.hl-bar{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:15px 18px;border-bottom:1px solid #f0e4da}
.hl-bar b{font-size:16px;font-weight:700}
.hl-bar span{font-size:12px;color:#7a6f66}
.hl-cap{position:absolute;left:22px;bottom:16px;margin:0;font:600 10px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:#a0623a}
.hl-seal{position:absolute;right:18px;bottom:14px;width:44px;height:44px;border-radius:10px;animation:hl-float 6s ease-in-out -2s infinite}
.hl ol,.hl ul{list-style:none;margin:0;padding:0}

/* CRM: Today, ticking off */
.hl-list li{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid #f4ebe3;transition:background-color .5s ease}
.hl-list li:first-child{border-top:0}
.hl-list b{display:block;font-size:14px;font-weight:650}
.hl-list small{display:block;margin-top:2px;font-size:12px;color:#7a6f66}
.hl-av{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fde3d1;color:#9b3f1a;font-size:12px;font-weight:700;font-style:normal}
.hl-list em{font-style:normal;font-size:12px;font-weight:700;color:#3f6b35;background:#e7f2e0;border-radius:99px;padding:4px 9px;opacity:0;transform:translateX(8px) scale(.9);transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.25,1.3)}
.hl-list li.is-on{background:#f7fbf4}
.hl-list li.is-on em{opacity:1;transform:none}
.hl-list li.is-on .hl-av{background:#e7f2e0;color:#3f6b35}

/* Commerce: a storefront and its notifications */
.hl-shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px 18px 20px}
.hl-item b{display:block;margin-top:8px;font-size:13px;font-weight:650}
.hl-item span{font-size:12px;color:#7a6f66}
.hl-swatch{display:block;aspect-ratio:1;border-radius:10px;background:linear-gradient(150deg,#f3e3cc,#dcc1a0)}
.hl-swatch.b{background:linear-gradient(150deg,#e3efdc,#b9d3a9)}
.hl-swatch.c{background:linear-gradient(150deg,#fbe2da,#eab3a3)}
.hl-swatch{display:grid;place-items:center}
.hl-swatch:after{content:"";width:46%;height:46%;border-radius:10px 10px 16px 16px;background:rgba(255,255,255,.6)}
.hl-swatch.b:after{border-radius:50%}
.hl-swatch.c:after{border-radius:3px;width:40%;height:52%}
.hl-toasts{position:absolute;z-index:2;right:clamp(10px,3vw,26px);top:52px;display:grid;width:min(270px,66%)}
.hl-toasts li{grid-area:1/1}
.hl-toasts:not([data-cycle-bound])>li:first-child{opacity:1;transform:none}
.hl-toasts li{padding:10px 13px;border-radius:10px;background:#241f1b;color:#fff;font-size:12.5px;line-height:1.3;box-shadow:0 12px 26px -12px rgba(36,31,27,.6);opacity:0;transform:translateY(-8px) scale(.96);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.25,1.2)}
.hl-toasts li b{color:#ffb98a;font-weight:700}
.hl-toasts li.is-on{opacity:1;transform:none}
.hl-shop .hl-card{margin-top:40px}

/* Games and Tools: one slide at a time */
.hl-slides{position:relative;display:grid}
.hl-slides>*{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px) scale(.985);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.25,1),visibility 0s .6s}
.hl-slides>.is-on,.hl-slides:not([data-cycle-bound])>:first-child{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.25,1),visibility 0s}
.hl-game{display:block;color:inherit;text-decoration:none;overflow:hidden;border-radius:16px;background:#fff;border:1px solid #ead9cd;box-shadow:0 22px 44px -18px rgba(96,48,14,.28)}
.hl-game img{display:block;width:100%;height:auto;aspect-ratio:640/350;object-fit:cover}
.hl-game span{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:13px 16px}
.hl-game b{font-size:17px;font-weight:700}
.hl-game small{font-size:12px;color:#7a6f66}
.hl-game:hover b,.hl-game:focus-visible b{color:#c4501a}
.hl-games{animation:hl-float 7s ease-in-out infinite;width:100%;max-width:470px}
.hl-calc{padding:6px 18px 18px}
.hl-calc dl{display:grid;grid-template-columns:1fr auto;gap:9px 14px;margin:12px 0 14px;font-size:14px}
.hl-calc dt{color:#7a6f66}
.hl-calc dd{margin:0;font-weight:650;font-variant-numeric:tabular-nums}
.hl-calc p{display:flex;justify-content:space-between;align-items:baseline;margin:0;padding:13px 15px;border-radius:10px;background:#fff1e6;font-size:13px;color:#7a5236}
.hl-calc p strong{font-size:24px;color:#b84a16;font-variant-numeric:tabular-nums}

@keyframes hl-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@media(max-width:650px){.hl{min-height:0;padding:44px 14px 50px}.hl-list li{padding:11px 13px;gap:10px}.hl-shop .hl-card{margin-top:56px}.hl-toasts{width:72%}}
@media(prefers-reduced-motion:reduce){.hl-card,.hl-seal,.hl-games{animation:none}.hl *{transition:none!important}}
a.hl-card{display:block;color:inherit;text-decoration:none}
a.hl-card:hover .hl-bar b,a.hl-card:focus-visible .hl-bar b{color:#c4501a}

/* Fables: the first scene, waiting for a choice (inside the page's own positioned .hero-image box) */
.home-page .hero-live{background:none;border:0}
.home-page .hero-live:before{display:none}
.hero-live .hl{height:100%;min-height:0}
.hl-scene{padding:16px 18px 18px}
.hl-scene p{margin:0 0 14px;font-size:15px;line-height:1.55;color:#4a423b}
.hl-scene strong{color:#241f1b;letter-spacing:.02em}
.hl-choices{display:grid;gap:8px}
.hl-choices li{padding:11px 14px;border:1px solid #ead9cd;border-radius:10px;font-size:14px;font-weight:650;transition:background-color .4s ease,border-color .4s ease,color .4s ease,transform .4s cubic-bezier(.2,.8,.25,1)}
.hl-choices li:before{content:"→ ";color:#c4501a}
.hl-choices li.is-on{background:#241f1b;border-color:#241f1b;color:#fff;transform:translateX(4px)}
.hl-choices li.is-on:before{color:#ffb98a}
@media(max-width:900px){.home-page .fable-hero:has(.hero-live){display:flex;flex-direction:column}.home-page .hero-live{order:2;height:auto}}

/* Tunes: now playing, one track at a time (nothing plays on the landing; the card opens the library) */
.hl-track{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;padding:16px 18px 18px}
.hl-track>span{display:block;min-width:0}
.hl-track img{display:block;width:96px;height:96px;border-radius:10px;object-fit:cover;box-shadow:0 10px 22px -12px rgba(36,31,27,.55)}
.hl-track b{display:block;font-size:17px;font-weight:700}
.hl-track small{display:block;margin-top:3px;font-size:12px;color:#7a6f66}
.hl-prog{display:block;height:4px;margin-top:14px;border-radius:99px;background:#f0e4da;overflow:hidden}
.hl-prog i{display:block;width:100%;height:100%;border-radius:inherit;background:#f07832;transform-origin:left;transform:scaleX(.38)}
.hl-slides>.is-on .hl-prog i{animation:hl-prog 3.6s linear both}
.hl-eq{display:flex;align-items:flex-end;gap:4px;height:58px;padding:4px 18px 18px}
.hl-eq i{flex:1;height:100%;border-radius:3px 3px 1px 1px;background:#f8c9a6;transform-origin:bottom;transform:scaleY(.35);animation:hl-eq 1.1s ease-in-out infinite alternate}
.hl-eq i:nth-child(3n){animation-duration:.8s;background:#f07832}
.hl-eq i:nth-child(3n+1){animation-duration:1.35s}
.hl-eq i:nth-child(2){animation-delay:-.4s}.hl-eq i:nth-child(4){animation-delay:-.9s}.hl-eq i:nth-child(5){animation-delay:-.2s}
.hl-eq i:nth-child(7){animation-delay:-.7s}.hl-eq i:nth-child(8){animation-delay:-.5s}.hl-eq i:nth-child(10){animation-delay:-1s}
.hl-eq i:nth-child(11){animation-delay:-.3s}.hl-eq i:nth-child(13){animation-delay:-.6s}.hl-eq i:nth-child(14){animation-delay:-.15s}
@keyframes hl-prog{from{transform:scaleX(.04)}to{transform:scaleX(1)}}
@keyframes hl-eq{from{transform:scaleY(.2)}to{transform:scaleY(1)}}

/* Wisdom: a question, and Moss's answer */
.hl-ask{display:block;padding:16px 18px 20px}
.hl-ask q{display:block;width:fit-content;max-width:85%;margin:0 0 12px auto;padding:10px 14px;border-radius:16px 16px 4px 16px;background:#241f1b;color:#fff;font-size:14px;quotes:none}
.hl-ask p{margin:0;padding:12px 15px;border-radius:16px 16px 16px 4px;background:#fff1e6;color:#4a423b;font:15px/1.55 Georgia,serif}
.hl-ask p b{display:block;margin-bottom:3px;font:700 11px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:#a0623a}
@media(prefers-reduced-motion:reduce){.hl-eq i,.hl-slides>.is-on .hl-prog i{animation:none}}