/* wow-20261008a — Ace homepage: companion walk, voice typography, hold-key greeting, answer light. */

/* 7 — the companion leans toward the pointer and walks to what you hover */
#ace-partner-gem{transition:filter .25s ease}
#ace-partner-gem .apg-svg{transform:rotate(var(--ace-lean,0deg));transform-origin:50% 62%;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
#ace-partner-gem.is-visiting .apg-svg{transform:rotate(var(--ace-lean,0deg)) scale(1.08)}
#ace-partner-gem.is-visiting{filter:drop-shadow(0 0 14px rgba(255,217,122,.55))}
body.ace-partner-on #ace-partner-gem .apg-svg{transition-duration:.18s}
#ace-partner-gem .apg-gloss{transform-origin:50% 40%;animation:ace-blink 7s ease-in-out infinite}
@keyframes ace-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.15)}}
.ace-visited{position:relative}
.ace-visit-tag{position:fixed;z-index:69;pointer-events:none;padding:5px 9px;border-radius:7px;font:600 12px/1.2 var(--body,system-ui,sans-serif);color:#1a1200;background:linear-gradient(180deg,#ffe9a0,#e8b845);box-shadow:0 4px 14px rgba(0,0,0,.35);opacity:0;transform:translate3d(var(--x,0px),var(--y,0px),0) scale(.9);transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1);white-space:nowrap}
.ace-visit-tag.is-on{opacity:1;transform:translate3d(var(--x,0px),var(--y,0px),0) scale(1)}
html[data-theme=light] .ace-visit-tag{box-shadow:0 4px 14px rgba(0,0,0,.18)}

/* 8 — typography breathes with your voice; the Notes window leans toward the mic */
:root{--ace-voice:0}
.hero-copy h1{transition:letter-spacing .09s linear,text-shadow .09s linear;letter-spacing:calc(-.065em + var(--ace-voice,0) * .05em)}
body[data-ace-phase=listening] .hero-copy h1 span{text-shadow:0 0 calc(var(--ace-voice,0) * 28px) rgba(255,217,122,calc(var(--ace-voice,0) * .9))}
body[data-ace-phase=listening] .hero-copy p,body[data-ace-phase=listening] .hero-copy .eyebrow{transition:transform .09s linear;transform:translateX(calc(var(--ace-voice,0) * -3px))}
.hero-product .ace-notes-demo{transition:transform .12s ease-out,box-shadow .2s ease}
body[data-ace-phase=listening] .hero-product .ace-notes-demo{transform:perspective(1100px) rotateY(calc(var(--ace-voice,0) * -7deg)) translateX(calc(var(--ace-voice,0) * -10px)) scale(calc(1 + var(--ace-voice,0) * .012));box-shadow:0 24px 80px #000a,0 0 0 1px #277bff22,0 0 calc(40px + var(--ace-voice,0) * 60px) rgba(255,217,122,calc(.12 + var(--ace-voice,0) * .35))}
html[data-theme=light] body[data-ace-phase=listening] .hero-product .ace-notes-demo{box-shadow:0 24px 60px #00000014,0 0 calc(30px + var(--ace-voice,0) * 50px) rgba(232,184,69,calc(.15 + var(--ace-voice,0) * .35))}
@media (prefers-reduced-motion:reduce){.hero-copy h1,.hero-product .ace-notes-demo,.hero-copy p{transition:none!important;transform:none!important;letter-spacing:-.065em!important;text-shadow:none!important}}

/* 13 — hold the key and Ace speaks: the key caps light while held, the gem glows while it talks */
.shortcut-hint kbd{transition:background .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease}
html.ace-key-held .shortcut-hint kbd{background:linear-gradient(180deg,#ffe9a0,#e8b845);color:#1a1200;box-shadow:0 0 0 1px #b7841f,0 0 18px rgba(255,217,122,.6);transform:translateY(1px)}
html.ace-greeting #ace-partner-gem{filter:drop-shadow(0 0 18px rgba(255,217,122,.75))}
html.ace-greeting #ace-partner-gem .apg-svg{transform:rotate(var(--ace-lean,0deg)) scale(1.12)}
.ace-greet-line{position:fixed;z-index:71;pointer-events:none;max-width:min(420px,calc(100vw - 32px));padding:10px 14px;border-radius:12px;font:500 15px/1.35 var(--body,system-ui,sans-serif);color:#fff;background:rgba(10,10,12,.92);border:1px solid rgba(255,217,122,.45);box-shadow:0 10px 30px rgba(0,0,0,.45);opacity:0;transform:translate3d(var(--x,0px),var(--y,0px),0) translateY(6px);transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1)}
.ace-greet-line.is-on{opacity:1;transform:translate3d(var(--x,0px),var(--y,0px),0)}
html[data-theme=light] .ace-greet-line{color:#111114;background:rgba(255,255,255,.96);border-color:rgba(184,132,31,.5);box-shadow:0 10px 30px rgba(0,0,0,.18)}

/* 1 — the answer lights the real element on the page */
.ace-light-host{position:relative}
.ace-light{position:fixed;z-index:68;pointer-events:none;border-radius:12px;box-shadow:0 0 0 2px rgba(255,217,122,.95),0 0 32px rgba(255,217,122,.55),inset 0 0 40px rgba(255,217,122,.12);opacity:0;transition:opacity .25s ease,left .45s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1),height .45s cubic-bezier(.2,.8,.2,1)}
.ace-light.is-on{opacity:1}
.ace-light::after{content:"";position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,rgba(255,244,200,.55) 50%,transparent 70%);background-size:220% 100%;animation:ace-sheen 1.6s linear infinite;mix-blend-mode:screen}
html[data-theme=light] .ace-light::after{mix-blend-mode:multiply;background:linear-gradient(115deg,transparent 30%,rgba(184,132,31,.28) 50%,transparent 70%);background-size:220% 100%}
@keyframes ace-sheen{0%{background-position:120% 0}100%{background-position:-120% 0}}
.ace-underline{background-image:linear-gradient(90deg,#ffe9a0,#e8b845);background-repeat:no-repeat;background-size:0 3px;background-position:0 100%;transition:background-size .6s cubic-bezier(.2,.8,.2,1);padding-bottom:2px}
.ace-underline.is-on{background-size:100% 3px}
html[data-theme=light] .ace-underline{background-image:linear-gradient(90deg,#b7841f,#e8b845)}

/* 7 — a quick dip when you click what the companion is sitting on */
#ace-partner-gem.is-tap .apg-svg{animation:ace-tap .32s cubic-bezier(.2,.8,.2,1)}
@keyframes ace-tap{0%{transform:rotate(var(--ace-lean,0deg)) scale(1.08)}45%{transform:rotate(var(--ace-lean,0deg)) translateY(7px) scale(.96)}100%{transform:rotate(var(--ace-lean,0deg)) scale(1.08)}}

/* ===== 2 + 9: your real screen, a live lecture → notes. Objects on the table. (wow-20261008c) ===== */
.ace-try{display:flex;align-items:center;gap:14px;margin:14px 0 4px;flex-wrap:wrap}
.ace-try-chip{display:inline-flex;align-items:center;gap:12px;background:transparent;border:0;padding:0;cursor:pointer;color:var(--ink,#f6f3ea);font:600 14px/1.2 var(--body,system-ui,sans-serif);text-align:left}
.ace-try-chip .ace-chip{--size:46px;flex:none}
.ace-try-chip .ace-chip>span{display:grid;place-items:center;width:100%;height:100%;font:700 18px/1 system-ui,sans-serif;color:var(--ace-gold,#e9c46a)}
.ace-try-chip small{display:block;font:400 12px/1.3 var(--body,system-ui,sans-serif);color:var(--muted,#a8bdd5);margin-top:2px}
.ace-try-chip:hover .ace-chip{transform:translateY(-2px) rotateX(8deg)}
.ace-try-chip:focus-visible{outline:2px solid var(--ace-gold,#e9c46a);outline-offset:4px;border-radius:12px}
.ace-try-chip[disabled]{opacity:.55;cursor:default}
.ace-stack{display:inline-flex;align-items:flex-end;gap:2px;margin-left:4px;vertical-align:middle}
.ace-stack i{display:block;width:16px;height:5px;border-radius:3px;background:radial-gradient(circle at 50% 30%,var(--ace-gold-hi,#fff3c4),var(--ace-gold,#e9c46a) 60%,var(--ace-gold-lo,#8f651a));box-shadow:0 1px 0 var(--ace-gold-lo,#8f651a);animation:ace-chip-drop .5s var(--ace-spring,ease) both}
.ace-stack i:nth-child(2){animation-delay:.06s}.ace-stack i:nth-child(3){animation-delay:.12s}.ace-stack i:nth-child(4){animation-delay:.18s}.ace-stack i:nth-child(5){animation-delay:.24s}.ace-stack i:nth-child(6){animation-delay:.3s}
@keyframes ace-chip-drop{0%{opacity:0;transform:translateY(-14px)}100%{opacity:1;transform:none}}
/* the Notes window's real phase */
.ace-metal .ace-real-phase{display:none}
.ace-notes-demo[data-phase=real] .ace-listen-phase,.ace-notes-demo[data-phase=real] .ace-notes-phase{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}
.ace-notes-demo[data-phase=real] .ace-real-phase{display:flex!important;flex-direction:column;gap:12px;min-height:100%;color:var(--ace-ink,#f6f3ea)}
.ace-real-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ace-real-head .ace-real-title{font:700 16px/20px system-ui,sans-serif;background:linear-gradient(160deg,#fff3c4,#e9c46a 40%,#c99a3a);-webkit-background-clip:text;background-clip:text;color:transparent}
.ace-real-close{background:transparent;border:1px solid rgba(233,196,106,.35);color:#c9c4b6;border-radius:8px;padding:6px 10px;font:600 12px/1 system-ui,sans-serif;cursor:pointer}
.ace-real-close:hover{border-color:#e9c46a;color:#fff}
.ace-real-card{position:relative;border-radius:16px;padding:16px 18px 14px;background:radial-gradient(120% 70% at 50% -10%,rgba(255,232,170,.10),transparent 55%),linear-gradient(180deg,#0e0e13,#07070a);border:1px solid rgba(233,196,106,.5);box-shadow:inset 0 1px 0 rgba(255,243,196,.5),inset 0 0 0 4px #07070a,inset 0 0 0 5px rgba(233,196,106,.26),0 18px 44px rgba(0,0,0,.55);overflow:hidden}
.ace-real-card .ace-idx{position:absolute;font:800 13px/1 system-ui,sans-serif;color:#e9c46a;display:flex;flex-direction:column;align-items:center;gap:1px;pointer-events:none;opacity:.9}
.ace-real-card .ace-idx.tl{left:9px;top:8px}.ace-real-card .ace-idx.br{right:9px;bottom:8px;transform:rotate(180deg)}
.ace-real-card .ace-idx svg{width:10px;height:12px}
.ace-real-card .ace-rosette{left:50%;top:50%;width:360px;height:360px;margin:-180px 0 0 -180px;opacity:.06}
.ace-real-card>*:not(.ace-rosette):not(.ace-idx){position:relative;z-index:1}
.ace-real-card.is-glint::after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 30%,rgba(255,243,196,.55) 50%,transparent 70%);background-size:260% 100%;animation:ace-glint-once 1.1s ease-out 1;mix-blend-mode:screen;pointer-events:none}
@keyframes ace-glint-once{0%{background-position:130% 0}100%{background-position:-130% 0}}
.ace-real-kicker{margin:0 0 6px;font:700 12px/1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#e9c46a}
.ace-real-text{margin:0;font:400 14px/1.5 system-ui,sans-serif;color:#f4f1e8;min-height:3em;white-space:pre-wrap}
.ace-real-text .w{transition:color .25s ease,text-shadow .25s ease}
.ace-real-text .w.is-lit{color:#fff3c4;text-shadow:0 0 12px rgba(233,196,106,.55)}
.ace-real-thumb{float:right;width:96px;height:60px;object-fit:cover;object-position:top left;border-radius:6px;border:1px solid rgba(233,196,106,.4);margin:0 0 8px 12px;box-shadow:0 6px 16px rgba(0,0,0,.5)}
.ace-real-foot{display:flex;align-items:center;gap:10px;margin-top:10px;font:500 12px/1 system-ui,sans-serif;color:#8d8878}
.ace-real-foot .ace-chip{--size:30px}
.ace-real-foot .ace-chip>span{display:grid;place-items:center;width:100%;height:100%;font:700 12px/1 system-ui,sans-serif;color:#e9c46a}
/* listening card (lecture) */
.ace-real-listen .ace-wave{height:64px!important;margin:6px 0 10px!important}
.ace-real-transcript{margin:0;font:400 14px/1.5 system-ui,sans-serif;color:#f4f1e8;max-height:7.5em;overflow:hidden;position:relative}
.ace-real-transcript .interim{color:#8d8878}
.ace-real-transcript::after{content:"";position:absolute;inset:0 0 0 0;background:linear-gradient(180deg,#07070a 0%,transparent 30%);pointer-events:none}
.ace-real-timer{font:700 12px/1 system-ui,sans-serif;color:#e9c46a;letter-spacing:.06em}
.ace-real-actions{display:flex;align-items:center;gap:10px;margin-top:10px}
.ace-real-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:9px;border:1px solid rgba(233,196,106,.55);background:linear-gradient(160deg,#fff3c4,#e9c46a 40%,#c99a3a);color:#1a1200;font:700 13px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 2px 0 #8f651a,inset 0 1px 0 rgba(255,255,255,.5)}
.ace-real-btn.secondary{background:transparent;color:#e9c46a;box-shadow:none}
.ace-real-btn[disabled]{opacity:.5;cursor:default}
/* a hand of cards: summary, key points, actions */
.ace-hand{position:relative;display:grid;grid-template-columns:1fr;gap:10px}
.ace-hand .ace-real-card{animation:ace-deal .9s var(--ace-spring,ease) both}
.ace-hand .ace-real-card:nth-child(2){animation-delay:.12s}.ace-hand .ace-real-card:nth-child(3){animation-delay:.24s}.ace-hand .ace-real-card:nth-child(4){animation-delay:.36s}
.ace-real-card ul{margin:0;padding-left:18px;color:#e8e3d6;font:400 13px/1.5 system-ui,sans-serif}
.ace-real-card li{margin:0 0 3px}
.ace-real-headline{margin:0 0 4px;font:700 17px/1.25 "Manrope",system-ui,sans-serif;color:#f6f3ea;letter-spacing:-.02em}
/* the flashcard deck: tap to flip, swipe/next to draw */
.ace-deck{position:relative;height:150px;perspective:1000px}
.ace-flash{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s var(--ace-spring,ease);cursor:pointer;border:0;padding:0;background:transparent;text-align:left}
.ace-flash.is-flipped{transform:rotateY(180deg)}
.ace-flash .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:14px;padding:16px 18px;background:radial-gradient(120% 70% at 50% -10%,rgba(255,232,170,.10),transparent 55%),linear-gradient(180deg,#0e0e13,#07070a);border:1px solid rgba(233,196,106,.5);box-shadow:inset 0 1px 0 rgba(255,243,196,.5),inset 0 0 0 4px #07070a,inset 0 0 0 5px rgba(233,196,106,.26),0 14px 34px rgba(0,0,0,.5);color:#f6f3ea;font:500 14px/1.45 system-ui,sans-serif;display:flex;flex-direction:column;justify-content:center}
.ace-flash .face.back{transform:rotateY(180deg);color:#fff3c4}
.ace-flash .face small{display:block;font:700 10px/1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#e9c46a;margin-bottom:8px}
.ace-deck .ace-under{position:absolute;inset:6px -4px -6px 4px;border-radius:14px;background:#0a0a0f;border:1px solid rgba(233,196,106,.25);transform:rotate(2.5deg);z-index:-1}
.ace-deck .ace-under.two{inset:12px -8px -12px 8px;transform:rotate(5deg);opacity:.6}
.ace-deck-nav{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font:600 12px/1 system-ui,sans-serif;color:#8d8878}
@media (max-width:820px){.ace-try{justify-content:center}.ace-real-thumb{width:72px;height:46px}}
@media (prefers-reduced-motion:reduce){.ace-hand .ace-real-card,.ace-stack i{animation:none!important}.ace-flash{transition:none}}
/* real phase: the window keeps its place in the hero and scrolls inside, cards never clip under a hard edge */
.ace-notes-demo[data-phase=real] .ace-notes-body{overflow:auto!important;max-height:min(70vh,560px);padding-right:18px!important;scrollbar-width:thin;scrollbar-color:rgba(233,196,106,.5) transparent;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 28px),transparent 100%)}
.ace-notes-demo[data-phase=real] .ace-notes-body::-webkit-scrollbar{width:6px}
.ace-notes-demo[data-phase=real] .ace-notes-body::-webkit-scrollbar-thumb{background:rgba(233,196,106,.45);border-radius:3px}
.ace-notes-demo[data-phase=real] .ace-real-phase{padding-bottom:30px}

/* ===== 3: the website follows the install (wow-20261008d). Steps are cards; done ones turn face-up gold. ===== */
.ace-install{margin:12px 0 4px;max-width:520px}
.ace-install-card{position:relative;border-radius:16px;padding:14px 16px 12px;background:radial-gradient(120% 70% at 50% -10%,rgba(255,232,170,.10),transparent 55%),linear-gradient(180deg,#0e0e13,#07070a);border:1px solid rgba(233,196,106,.5);box-shadow:inset 0 1px 0 rgba(255,243,196,.5),inset 0 0 0 4px #07070a,inset 0 0 0 5px rgba(233,196,106,.26),0 18px 44px rgba(0,0,0,.5);color:#f6f3ea;overflow:hidden}
.ace-install-card .ace-rosette{left:50%;top:50%;width:360px;height:360px;margin:-180px 0 0 -180px;opacity:.05}
.ace-install-card>*:not(.ace-rosette){position:relative;z-index:1}
.ace-install-title{margin:0 0 10px;font:700 13px/1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(160deg,#fff3c4,#e9c46a 40%,#c99a3a);-webkit-background-clip:text;background-clip:text;color:transparent}
.ace-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ace-step{position:relative;perspective:800px;min-height:84px}
.ace-step-card{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s linear(0,0.009,0.035 2.1%,0.141 4.4%,0.723 12.9%,0.938 16.7%,1.017 20.6%,1.034 23.6%,1.027 27.2%,0.998 36.1%,0.993 44.8%,1)}
.ace-step.is-done .ace-step-card{transform:rotateY(180deg)}
.ace-step .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:10px;padding:9px 10px;font:600 11.5px/1.3 system-ui,sans-serif;display:flex;flex-direction:column;justify-content:space-between}
.ace-step .face.front{background:linear-gradient(180deg,#0f0f14,#09090c);border:1px solid rgba(233,196,106,.22);color:#8d8878}
.ace-step .face.front::after{content:"";position:absolute;inset:5px;border-radius:7px;border:1px solid rgba(233,196,106,.12)}
.ace-step .face.back{transform:rotateY(180deg);background:linear-gradient(160deg,#fff3c4,#e9c46a 40%,#c99a3a);color:#1a1200;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.ace-step .face small{display:block;font:500 10px/1.2 system-ui,sans-serif;opacity:.8;margin-top:4px}
.ace-step .face.front i{display:block;width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(233,196,106,.45);animation:ace-step-wait 1.6s ease-in-out infinite}
@keyframes ace-step-wait{0%,100%{box-shadow:0 0 0 0 rgba(233,196,106,0)}50%{box-shadow:0 0 0 5px rgba(233,196,106,.18)}}
.ace-install-note{margin:10px 0 0;font:400 12px/1.45 system-ui,sans-serif;color:#9a9585}
.ace-install-note a{color:#e9c46a}
.ace-install-card.is-complete{box-shadow:inset 0 1px 0 rgba(255,243,196,.5),inset 0 0 0 4px #07070a,inset 0 0 0 5px rgba(233,196,106,.26),0 0 0 2px rgba(255,243,196,.5),0 0 44px rgba(233,196,106,.45)}
html[data-theme=light] .ace-install-card{color:#f6f3ea}
@media (max-width:520px){.ace-steps{grid-template-columns:1fr}.ace-step{min-height:64px}}
@media (prefers-reduced-motion:reduce){.ace-step-card{transition:none}.ace-step .face.front i{animation:none}}

/* ===== Michael, 2026-10-08: "make the notes and transcription on a metal black and gold card" =====
   Brushed black metal, milled gold edge, a gold contact chip, engraved gold type, a specular that follows the pointer. */
.ace-metal .ace-real-phase{--mx:50%;--my:30%}
.ace-metal .ace-real-card,.ace-metal .ace-flash .face{
  border-radius:12px!important;border:1px solid #b8892f!important;color:#ece9e0;
  background:
    linear-gradient(115deg,transparent 0%,transparent calc(var(--mx) - 22%),rgba(255,255,255,.10) var(--mx),transparent calc(var(--mx) + 22%)),
    radial-gradient(140% 90% at var(--mx) -20%,rgba(255,236,190,.09),transparent 60%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,rgba(0,0,0,0) 1px 3px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 1px,rgba(0,0,0,0) 1px 7px),
    linear-gradient(180deg,#1a1b20 0%,#0f1013 45%,#0a0a0d 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.75),
    inset 0 0 0 1px rgba(255,243,196,.28),inset 0 0 0 2px rgba(0,0,0,.55),
    0 2px 0 #c99a3a,0 3px 0 #8f651a,0 4px 0 #5c3f0e,0 22px 44px rgba(0,0,0,.65)!important;
  transition:background-position .08s linear}
.ace-metal .ace-real-card::before{content:"";position:absolute;left:14px;top:14px;width:26px;height:19px;border-radius:4px;z-index:1;
  background:linear-gradient(160deg,#fff3c4 0%,#e9c46a 30%,#c99a3a 60%,#8f651a 100%);
  box-shadow:inset 0 0 0 1px rgba(90,60,10,.55),inset 0 1px 0 rgba(255,255,255,.45),0 1px 0 rgba(0,0,0,.6);
  -webkit-mask:linear-gradient(#000,#000) padding-box,repeating-linear-gradient(0deg,transparent 0 5px,rgba(0,0,0,.001) 5px 6px);mask:linear-gradient(#000,#000) padding-box}
.ace-metal .ace-real-card::after{content:"";position:absolute;left:14px;top:14px;width:26px;height:19px;border-radius:4px;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(70,45,5,.7) 5px 6px),repeating-linear-gradient(90deg,transparent 0 8px,rgba(70,45,5,.7) 8px 9px);opacity:.9}
.ace-metal .ace-real-card.is-glint::after{inset:-40%;left:auto;top:auto;width:auto;height:auto;border-radius:0;background:linear-gradient(115deg,transparent 30%,rgba(255,243,196,.55) 50%,transparent 70%);background-size:260% 100%;animation:ace-glint-once 1.1s ease-out 1;mix-blend-mode:screen;opacity:1}
.ace-metal .ace-real-card .ace-idx{color:#e9c46a;text-shadow:0 1px 0 rgba(255,255,255,.12),0 -1px 0 rgba(0,0,0,.9)}
.ace-metal .ace-real-card .ace-idx.tl{left:auto;right:12px;top:10px;transform:none}
.ace-metal .ace-real-card .ace-idx.br{right:auto;left:12px;bottom:10px}
.ace-metal .ace-real-card .ace-rosette{opacity:.045;color:#e9c46a}
.ace-metal .ace-real-kicker,.ace-metal .ace-real-headline,.ace-metal .ace-flash .face small{
  background:linear-gradient(160deg,#fff3c4 0%,#e9c46a 38%,#c99a3a 70%,#a87a1e 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.9)) drop-shadow(0 -1px 0 rgba(255,255,255,.06))}
.ace-metal .ace-real-card .ace-real-kicker{margin-left:34px;padding-top:2px}
.ace-metal .ace-real-card .ace-real-headline{margin-left:34px}
.ace-metal .ace-real-card .ace-real-head .ace-real-kicker{margin-left:34px}
.ace-metal .ace-real-text,.ace-metal .ace-real-card ul,.ace-metal .ace-real-transcript{color:#e6e3da;text-shadow:0 1px 0 rgba(0,0,0,.7)}
.ace-metal .ace-real-text .w.is-lit{color:#fff3c4;text-shadow:0 0 12px rgba(233,196,106,.55),0 1px 0 rgba(0,0,0,.7)}
.ace-metal .ace-real-card ul{padding-left:18px}
.ace-metal .ace-real-card li::marker{color:#e9c46a}
.ace-metal .ace-real-listen .ace-wave span{background:linear-gradient(180deg,#fff3c4,#e9c46a 48%,#8f651a)!important}
.ace-metal .ace-real-transcript::after{background:linear-gradient(180deg,#121317 0%,transparent 30%)}
.ace-metal .ace-real-timer{color:#e9c46a;text-shadow:0 1px 0 rgba(0,0,0,.8)}
.ace-metal .ace-real-btn{border-color:#8f651a;box-shadow:0 2px 0 #8f651a,0 3px 0 #5c3f0e,inset 0 1px 0 rgba(255,255,255,.55)}
.ace-metal .ace-real-btn.secondary{box-shadow:inset 0 0 0 1px rgba(233,196,106,.25)}
.ace-metal .ace-real-close{border-color:#8f651a;color:#e9c46a}
.ace-metal .ace-flash .face{padding:16px 18px 16px 18px}
.ace-metal .ace-flash .face.back{color:#fff3c4}
.ace-metal .ace-deck .ace-under{background:linear-gradient(180deg,#141519,#0b0b0e);border:1px solid rgba(201,154,58,.55);box-shadow:0 2px 0 #8f651a}
.ace-metal .ace-real-thumb{border:1px solid #c99a3a;box-shadow:0 1px 0 #8f651a,0 6px 16px rgba(0,0,0,.6)}
.ace-metal .ace-real-foot{color:#9a9585}
.ace-metal .ace-hand .ace-real-card{animation-duration:1.05s}

/* ===== 4: a Mac menu bar in the hero; its spade opens the real Ace from your Mac (wow-20261008e) ===== */
.ace-menubar{position:relative;z-index:4;display:flex;align-items:center;gap:14px;height:30px;margin:0 0 10px;padding:0 10px 0 12px;border-radius:9px 9px 0 0;background:linear-gradient(180deg,rgba(40,42,48,.92),rgba(24,25,30,.94));border:1px solid rgba(255,255,255,.08);border-bottom-color:rgba(0,0,0,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 18px rgba(0,0,0,.35);font:500 12.5px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;color:#e8e8ec;user-select:none;backdrop-filter:blur(10px)}
html[data-theme=light] .ace-menubar{background:linear-gradient(180deg,rgba(250,250,247,.9),rgba(232,232,228,.94));color:#1d1d1f;border-color:rgba(0,0,0,.08)}
.ace-menubar .mb-apple{font-size:14px;opacity:.9}
.ace-menubar .mb-app{font-weight:700}
.ace-menubar .mb-item{opacity:.85}
.ace-menubar .mb-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.ace-menubar .mb-glyph{opacity:.8;font-size:12px}
.ace-menubar .mb-clock{font-variant-numeric:tabular-nums;opacity:.9;white-space:nowrap}
.ace-menubar .mb-status{position:relative;display:grid;place-items:center;width:26px;height:22px;border-radius:5px;background:transparent;border:0;padding:0;cursor:pointer;color:#e9c46a;transition:background .15s ease,transform .25s var(--ace-spring-soft,ease)}
.ace-menubar .mb-status svg{width:13px;height:16px;filter:drop-shadow(0 0 6px rgba(233,196,106,.45));animation:ace-mb-breathe 3.2s ease-in-out infinite}
.ace-menubar .mb-status:hover,.ace-menubar .mb-status[aria-expanded=true]{background:rgba(233,196,106,.18)}
.ace-menubar .mb-status[aria-expanded=true] svg{animation:none;filter:drop-shadow(0 0 10px rgba(233,196,106,.8))}
.ace-menubar .mb-status.is-live::after{content:"";position:absolute;right:3px;top:3px;width:6px;height:6px;border-radius:50%;background:#34c759;box-shadow:0 0 6px #34c759}
@keyframes ace-mb-breathe{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.08);opacity:1}}
.ace-menubar .mb-status:focus-visible{outline:2px solid #e9c46a;outline-offset:2px}
/* the dropped panel (an NSPopover from the status item) */
.ace-panel{position:absolute;right:6px;top:36px;z-index:9;width:min(360px,calc(100% - 12px));border-radius:14px;color:#ece9e0;transform-origin:calc(100% - 20px) -8px;transform:translateY(-8px) scale(.96);opacity:0;pointer-events:none;transition:transform .55s var(--ace-spring,ease),opacity .25s ease;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,rgba(0,0,0,0) 1px 3px),linear-gradient(180deg,#17181d 0%,#0d0e11 50%,#09090c 100%);border:1px solid #b8892f;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,243,196,.22),0 2px 0 #c99a3a,0 3px 0 #8f651a,0 26px 60px rgba(0,0,0,.65)}
.ace-panel.is-open{transform:none;opacity:1;pointer-events:auto}
.ace-panel::before{content:"";position:absolute;right:14px;top:-7px;width:12px;height:12px;transform:rotate(45deg);background:#17181d;border-left:1px solid #b8892f;border-top:1px solid #b8892f}
.ace-panel-head{display:flex;align-items:center;gap:10px;padding:12px 14px 10px;border-bottom:1px solid rgba(233,196,106,.22)}
.ace-panel-head svg{width:16px;height:19px;color:#e9c46a}
.ace-panel-head strong{font:700 13px/1 system-ui,sans-serif;background:linear-gradient(160deg,#fff3c4,#e9c46a 40%,#c99a3a);-webkit-background-clip:text;background-clip:text;color:transparent}
.ace-panel-head .ace-panel-state{margin-left:auto;font:600 11px/1 system-ui,sans-serif;color:#9a9585;display:inline-flex;align-items:center;gap:6px}
.ace-panel-head .ace-panel-state i{width:7px;height:7px;border-radius:50%;background:#8a8a90}
.ace-panel-head .ace-panel-state.is-live i{background:#34c759;box-shadow:0 0 8px #34c759}
.ace-panel-head .ace-panel-state.is-wait i{background:#e9c46a;animation:ace-pulse 1.2s ease-in-out infinite}
.ace-panel-body{padding:12px 14px;max-height:300px;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(233,196,106,.45) transparent}
.ace-panel-line{margin:0 0 10px;font:400 13.5px/1.45 system-ui,sans-serif;color:#e6e3da;text-shadow:0 1px 0 rgba(0,0,0,.7)}
.ace-panel-line.you{color:#fff3c4}
.ace-panel-line.you::before{content:"You  ";font:700 10px/1 system-ui,sans-serif;letter-spacing:.1em;color:#e9c46a}
.ace-panel-line.ace::before{content:"Ace  ";font:700 10px/1 system-ui,sans-serif;letter-spacing:.1em;color:#e9c46a}
.ace-panel-line.sys{color:#9a9585;font-size:12.5px}
.ace-panel-form{display:flex;gap:8px;padding:10px 14px 14px;border-top:1px solid rgba(233,196,106,.22)}
.ace-panel-form input{flex:1;min-width:0;background:#0b0b0e;color:#f6f3ea;border:1px solid rgba(233,196,106,.35);border-radius:9px;padding:9px 11px;font:14px/1.3 system-ui,sans-serif}
.ace-panel-form input:focus{outline:none;border-color:#e9c46a;box-shadow:0 0 0 3px rgba(233,196,106,.18)}
.ace-panel-form .ace-chip{--size:38px;flex:none}
.ace-panel-form .ace-chip>span{display:grid;place-items:center;width:100%;height:100%;font:700 13px/1 system-ui,sans-serif;color:#e9c46a}
.ace-panel .ace-joker{margin:0}
.ace-panel .ace-panel-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ace-panel .ace-panel-actions a,.ace-panel .ace-panel-actions button{display:inline-flex;align-items:center;padding:8px 12px;border-radius:9px;border:1px solid rgba(233,196,106,.55);background:linear-gradient(160deg,#fff3c4,#e9c46a 40%,#c99a3a);color:#1a1200;font:700 12.5px/1 system-ui,sans-serif;cursor:pointer;text-decoration:none;box-shadow:0 2px 0 #8f651a}
.ace-panel .ace-panel-actions .quiet{background:transparent;color:#e9c46a;box-shadow:none}
@media (max-width:820px){.ace-menubar{height:28px;font-size:12px;gap:10px}.ace-menubar .mb-item,.ace-menubar .mb-glyph{display:none}}
@media (prefers-reduced-motion:reduce){.ace-menubar .mb-status svg{animation:none}.ace-panel{transition:none}}
@media (max-width:1100px){.ace-menubar .mb-clock{font-size:11.5px}}

/* ===== f: the whole thing is a black metal spade; the wave moves on its face ===== */
.hero-product .ace-notes-demo,.hero-product .ace-menubar{display:none!important}
.hero-product .ace-panel{top:calc(100% + 10px);right:0;transform-origin:calc(100% - 40px) -8px}
.hero-product .ace-panel::before{right:34px}
.hero-orbit{height:auto!important;min-height:420px}
.hero-product{display:flex;flex-direction:column;align-items:center}
.ace-spade-hero{position:relative;width:min(100%,440px);margin:0 auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.65)) drop-shadow(0 0 40px rgba(233,196,106,.14));transition:transform .9s var(--ace-spring,ease),width .9s var(--ace-spring,ease)}
.ace-spade-svg{display:block;width:100%;height:auto;overflow:visible}
.asp-wave{filter:url(#asp-glow)}
.ace-spade-hero.is-live .asp-wave rect{fill:url(#asp-wgold)}
.ace-spade-label{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:7px;font:700 12px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#e9c46a;text-shadow:0 1px 0 rgba(0,0,0,.9);pointer-events:none;opacity:.95}
.ace-spade-label i{width:7px;height:7px;border-radius:50%;background:#e9c46a;box-shadow:0 0 8px rgba(233,196,106,.7)}
.ace-spade-hero[data-phase=listening] .ace-spade-label i{animation:ace-pulse 1.1s ease-in-out infinite}
.ace-spade-hero[data-phase=idle] .ace-spade-label{opacity:.55}
.ace-spade-plate{display:flex;flex-direction:column;align-items:center;gap:12px;margin:14px auto 0;width:min(100%,440px)}
.ace-spade-caption{margin:0;padding:12px 18px;width:100%;box-sizing:border-box;text-align:center;border-radius:10px;font:500 15px/1.45 system-ui,sans-serif;color:#ece9e0;text-shadow:0 1px 0 rgba(0,0,0,.8);background:repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),linear-gradient(180deg,#17181d,#0b0b0e);border:1px solid #b8892f;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,243,196,.18),0 2px 0 #c99a3a,0 3px 0 #8f651a,0 16px 34px rgba(0,0,0,.55);min-height:3.2em}
.ace-spade-caption::after{content:"";display:inline-block;width:2px;height:1em;margin-left:3px;background:#e9c46a;vertical-align:-2px;animation:ace-caret .9s step-end infinite}
.ace-mac-chip-btn{display:inline-flex;align-items:center;gap:12px;background:transparent;border:0;padding:0;cursor:pointer;color:var(--ink,#f6f3ea);font:600 14px/1.2 var(--body,system-ui,sans-serif);text-align:left}
.ace-mac-chip-btn .ace-chip{--size:44px;flex:none}
.ace-mac-chip-btn .ace-chip>span{display:grid;place-items:center;width:100%;height:100%;color:#e9c46a}
.ace-mac-chip-btn .ace-chip svg{width:14px;height:17px}
.ace-mac-chip-btn small{display:block;font:400 12px/1.3 var(--body,system-ui,sans-serif);color:var(--muted,#a8bdd5);margin-top:2px}
.ace-mac-chip-btn:hover .ace-chip{transform:translateY(-2px) rotateX(8deg)}
.ace-mac-chip-btn[aria-expanded=true] .ace-chip{box-shadow:0 2px 0 var(--ace-gold-lo),0 10px 24px rgba(0,0,0,.55),0 0 0 4px rgba(233,196,106,.22)}
.ace-mac-chip-btn.is-live .ace-chip::after{box-shadow:inset 0 0 0 1.5px #34c759,inset 0 1px 0 rgba(255,243,196,.3)}
.ace-mac-chip-btn:focus-visible{outline:2px solid #e9c46a;outline-offset:4px;border-radius:12px}
/* results: the spade shrinks to the corner and the metal cards deal out */
.ace-spade-results{position:relative;width:100%;margin-top:14px;max-height:min(72vh,620px);overflow:auto;padding:0 6px 30px 0;scrollbar-width:thin;scrollbar-color:rgba(233,196,106,.5) transparent;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 28px),transparent 100%)}
.ace-spade-results::-webkit-scrollbar{width:6px}.ace-spade-results::-webkit-scrollbar-thumb{background:rgba(233,196,106,.45);border-radius:3px}
.ace-spade-results[hidden]{display:none}
.ace-metal .ace-real-phase{display:flex;flex-direction:column;gap:12px;color:#ece9e0}
.hero-product.is-results .ace-spade-hero{width:min(100%,150px);margin:0 0 0 auto}
.hero-product.is-results .ace-spade-plate{display:none}
@media (max-width:820px){.ace-spade-hero{width:min(100%,300px)}.hero-product.is-results .ace-spade-hero{width:110px}}
html[data-theme=light] .ace-spade-hero{filter:drop-shadow(0 26px 50px rgba(0,0,0,.35)) drop-shadow(0 0 30px rgba(201,154,58,.18))}
@media (prefers-reduced-motion:reduce){.ace-spade-caption::after{animation:none}.ace-spade-hero{transition:none}}
/* the old blue laptop plane and electric glow give way to the spade; the floor reflection turns gold */
.hero-product:before,.hero-product:after,.hero-product .computer-glow{display:none!important}
.hero-product .ace-spade-hero,.hero-product .ace-spade-plate,.hero-product .ace-spade-results{position:relative;z-index:2}
.hero-depth-floor{background:radial-gradient(ellipse at 50% 40%,rgba(233,196,106,.28) 0%,rgba(143,101,26,.14) 42%,transparent 70%)!important}
.hero-depth-floor:before{background:radial-gradient(ellipse,#000c 0%,#0a0806aa 40%,transparent 72%)!important}
.hero-depth-floor:after{background:linear-gradient(90deg,transparent,rgba(233,196,106,.55) 30%,rgba(255,243,196,.8) 50%,rgba(201,154,58,.55) 70%,transparent)!important;box-shadow:0 0 22px 5px rgba(233,196,106,.35)!important}
.hero-product{transform:perspective(1200px) translateY(-6px) rotateX(var(--depth-pitch,4deg)) rotateY(var(--depth-yaw,-6deg)) rotate(var(--depth-roll,-.5deg))}

/* ===== g: the object is an all-black metal card, gold spade, the voice waveform in the middle (Michael) ===== */
.hero-product .ace-spade-hero.ace-card-hero{--mx:35%;--my:20%;width:min(100%,560px);aspect-ratio:1.55;min-height:300px;border-radius:16px;padding:22px 26px 20px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;gap:12px;color:#ece9e0;position:relative;overflow:hidden;filter:none;
  background:
    linear-gradient(115deg,transparent 0%,transparent calc(var(--mx) - 24%),rgba(255,255,255,.09) var(--mx),transparent calc(var(--mx) + 24%)),
    radial-gradient(140% 90% at var(--mx) -20%,rgba(255,236,190,.10),transparent 60%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,rgba(0,0,0,0) 1px 3px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 1px,rgba(0,0,0,0) 1px 7px),
    linear-gradient(180deg,#1a1b20 0%,#0f1013 45%,#07070a 100%);
  border:1px solid #b8892f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,243,196,.28),inset 0 0 0 2px rgba(0,0,0,.55),inset 0 0 0 7px #07070a,inset 0 0 0 8px rgba(233,196,106,.22),0 2px 0 #c99a3a,0 3px 0 #8f651a,0 4px 0 #5c3f0e,0 30px 60px rgba(0,0,0,.65),0 0 60px rgba(233,196,106,.10)}
.ace-card-hero .ace-card-top{display:flex;align-items:center;gap:12px}
.ace-card-hero .ace-card-mark{filter:drop-shadow(0 1px 0 rgba(0,0,0,.9)) drop-shadow(0 0 10px rgba(233,196,106,.35))}
.ace-card-hero .ace-card-word{font:800 22px/1 "Manrope","DM Sans",system-ui,sans-serif;letter-spacing:-.02em;background:linear-gradient(160deg,#fff3c4,#e9c46a 40%,#c99a3a 70%,#a87a1e);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.9))}
.ace-card-hero .ace-spade-label{position:static;transform:none;margin-left:auto;opacity:.95;font-size:11px}
.ace-card-hero .ace-card-wave{width:100%;height:auto;flex:1 1 auto;max-height:150px;filter:drop-shadow(0 0 14px rgba(233,196,106,.25))}
.ace-card-hero .ace-spade-caption{margin:0;padding:0;background:none;border:0;box-shadow:none;text-align:left;font:500 15px/1.4 system-ui,sans-serif;color:#ece9e0;text-shadow:0 1px 0 rgba(0,0,0,.8);min-height:2.8em;max-height:4.2em;overflow:hidden;width:100%}
.ace-card-hero .ace-card-glint{position:absolute;inset:-40%;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,243,196,.28) 50%,transparent 70%);background-size:260% 100%;background-position:130% 0;animation:ace-glint 7s linear infinite;mix-blend-mode:screen}
.hero-product.is-results .ace-spade-hero.ace-card-hero{width:min(100%,260px);min-height:0;aspect-ratio:1.9;padding:12px 14px;margin:0 0 0 auto}
.hero-product.is-results .ace-card-hero .ace-spade-caption{display:none}
.hero-product.is-results .ace-card-hero .ace-card-word{font-size:16px}
.hero-product.is-results .ace-card-hero .ace-card-mark{width:22px!important;height:27px!important}
.ace-spade-plate{margin-top:14px}
html[data-theme=light] .hero-product .ace-spade-hero.ace-card-hero{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,243,196,.28),inset 0 0 0 2px rgba(0,0,0,.55),inset 0 0 0 7px #07070a,inset 0 0 0 8px rgba(233,196,106,.22),0 2px 0 #c99a3a,0 3px 0 #8f651a,0 4px 0 #5c3f0e,0 26px 50px rgba(0,0,0,.35)}
@media (max-width:820px){.hero-product .ace-spade-hero.ace-card-hero{min-height:240px;padding:16px 18px}.ace-card-hero .ace-card-word{font-size:18px}}
@media (prefers-reduced-motion:reduce){.ace-card-hero .ace-card-glint{animation:none}}

/* ===== h: portrait Ace of Spades. Corner indices, the wave across the middle, nothing else on the face (Michael) ===== */
.hero-product .ace-spade-hero.ace-card-hero.ace-card-portrait{width:min(100%,330px);aspect-ratio:5/7;min-height:0;padding:0;display:grid;place-items:center;border-radius:18px}
.ace-card-portrait .ace-corner{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;z-index:2;pointer-events:none}
.ace-card-portrait .ace-corner.tl{left:16px;top:14px}
.ace-card-portrait .ace-corner.br{right:16px;bottom:14px;transform:rotate(180deg)}
.ace-card-portrait .ace-corner-a{font:800 30px/1 "Manrope","DM Sans",system-ui,sans-serif;letter-spacing:-.02em;background:linear-gradient(160deg,#fff3c4,#e9c46a 40%,#c99a3a 70%,#a87a1e);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.9))}
.ace-card-portrait .ace-corner-spade{width:22px;height:27px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.9)) drop-shadow(0 0 8px rgba(233,196,106,.35))}
.ace-card-portrait .ace-card-wave{width:calc(100% - 48px);max-height:none;height:auto;flex:none;align-self:center;filter:drop-shadow(0 0 16px rgba(233,196,106,.28))}
.ace-card-strip{display:flex;align-items:center;gap:12px;width:min(100%,330px);padding:10px 14px;border-radius:10px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),linear-gradient(180deg,#17181d,#0b0b0e);border:1px solid #b8892f;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 0 #c99a3a,0 3px 0 #8f651a,0 14px 30px rgba(0,0,0,.55)}
.ace-card-strip .ace-spade-label{position:static;transform:none;flex:none;font-size:10.5px;opacity:.95}
.ace-card-strip .ace-spade-caption{margin:0;padding:0;background:none;border:0;box-shadow:none;text-align:left;font:500 13.5px/1.35 system-ui,sans-serif;color:#ece9e0;text-shadow:0 1px 0 rgba(0,0,0,.8);min-height:0;max-height:2.7em;overflow:hidden;width:auto;flex:1}
.ace-spade-plate{align-items:center}
.hero-product.is-results .ace-spade-hero.ace-card-hero.ace-card-portrait{width:min(100%,118px);aspect-ratio:5/7;padding:0;margin:0 0 0 auto}
.hero-product.is-results .ace-card-portrait .ace-corner-a{font-size:14px}
.hero-product.is-results .ace-card-portrait{--ace-corner-w:11px;--ace-corner-h:13px}
.hero-product.is-results .ace-card-portrait .ace-corner.tl{left:8px;top:6px}.hero-product.is-results .ace-card-portrait .ace-corner.br{right:8px;bottom:6px}
.hero-product.is-results .ace-card-portrait .ace-card-wave{width:calc(100% - 20px)}
@media (max-width:820px){.hero-product .ace-spade-hero.ace-card-hero.ace-card-portrait{width:min(100%,260px)}}

/* the strip's words type on and off while idle; the caret blinks like the phone's */
.ace-card-strip .ace-spade-caption{white-space:pre-wrap}
.ace-card-strip .ace-spade-caption::after{content:"\2009\258F";width:auto;height:auto;margin:0;background:none;color:#e9c46a;vertical-align:baseline;animation:ace-caret-blink 1s step-end infinite}
@keyframes ace-caret-blink{0%,100%{opacity:1}50%{opacity:.15}}

/* ===== i: the transcription sits in the middle of the face with the wave (Michael, via the web session) ===== */
.ace-card-portrait .ace-card-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:0 26px;box-sizing:border-box;pointer-events:none}
.ace-card-portrait .ace-card-face .ace-card-wave{width:100%;position:static}
.ace-card-portrait .ace-card-face .ace-spade-label{position:static;transform:none;font-size:10px;letter-spacing:.16em;opacity:.8}
.ace-card-portrait .ace-card-face .ace-spade-caption{margin:0;padding:0;background:none;border:0;box-shadow:none;text-align:center;font:500 15px/1.4 system-ui,sans-serif;color:#ece9e0;text-shadow:0 1px 0 rgba(0,0,0,.8);min-height:2.8em;max-height:4.3em;overflow:hidden;width:100%;white-space:pre-wrap}
.ace-card-portrait .ace-card-face .ace-spade-caption::after{content:"\2009\258F";width:auto;height:auto;margin:0;background:none;color:#e9c46a;vertical-align:baseline;animation:ace-caret-blink 1s step-end infinite}
.ace-card-strip{display:none}
.hero-product.is-results .ace-card-portrait .ace-card-face .ace-spade-caption,.hero-product.is-results .ace-card-portrait .ace-card-face .ace-spade-label{display:none}
.hero-orbit .at-hero-card{display:none!important}