/* product page */
.phead { position: relative; margin-top: -78px; padding-top: 78px; isolation: isolate; }
.phead canvas { position: absolute; inset: 0; width: 100%; height: 620px; z-index: -2; mask-image: linear-gradient(180deg, #000 40%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); opacity: .85; }

.crumbs { display: flex; gap: 10px; align-items: center; padding: 26px 0 26px; font: 600 semi-expanded 11px/1 var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.crumbs a:hover { color: var(--ink); }
.crumbs span:last-child { color: var(--ink-2); }

.ptop { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 34px; align-items: start; }

/* gallery */
.gal__main { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--bg-3); border: 1px solid var(--line); cursor: zoom-in; }
.gal__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease-out), transform 1.2s var(--ease-out); }
.gal__slide.on { opacity: 1; transform: scale(1); z-index: 1; }
.gal__main.zoom img.gal__slide.on { transform: scale(1.3); transition: transform .5s var(--ease-out); }
.gal__main.on-vid { cursor: pointer; }
/* video slides: poster + play button; the player only loads on click */
.gal__vid img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.6) saturate(1.1); transition: filter .5s, transform 1.2s var(--ease-out); }
.gal__main.on-vid:hover .gal__vid.on img { filter: brightness(.75) saturate(1.2); transform: scale(1.03); }
.gal__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 14px; padding: 8px 22px 8px 8px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font: 800 semi-expanded 12px/1 var(--label); letter-spacing: .06em; text-transform: uppercase; transition: background .3s, transform .5s var(--ease-out); }
.gal__play svg { width: 48px; height: 48px; padding: 15px 13px 15px 17px; border-radius: 50%; background: #fff; color: #0b0912; }
.gal__main.on-vid:hover .gal__play { background: var(--acc); transform: translate(-50%, -50%) scale(1.05); }
.gal__vid iframe, .gal__vid video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; z-index: 3; }
.gal__main.is-playing .gal__cap, .gal__main.is-playing .gal__count, .gal__main.is-playing .gal__nav { display: none; }
.gal__nav { position: absolute; z-index: 2; top: 50%; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; display: grid; place-items: center; background: rgba(8,6,14,.6); border: 1px solid var(--line-2); backdrop-filter: blur(10px); opacity: 0; transition: opacity .3s, background .3s, transform .4s var(--ease-out); }
.gal__nav svg { width: 18px; height: 18px; }
.gal__nav--p { left: 16px; } .gal__nav--n { right: 16px; }
.gal__main:hover .gal__nav { opacity: 1; }
.gal__nav:hover { background: var(--acc); }
.gal__count { position: absolute; z-index: 2; right: 16px; bottom: 14px; padding: 6px 10px; border-radius: 8px; background: rgba(8,6,14,.7); font: 600 semi-expanded 11px/1 var(--label); letter-spacing: .08em; }
.gal__cap { position: absolute; z-index: 2; left: 16px; bottom: 14px; padding: 7px 12px; border-radius: 8px; background: rgba(8,6,14,.7); backdrop-filter: blur(8px); font: 600 12px/1 var(--body); }
.gal__thumbs { display: flex; gap: 10px; margin-top: 12px; }
.gal__thumbs button { flex: 0 1 110px; min-width: 0; position: relative; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); opacity: .5; transition: opacity .3s, border-color .3s, transform .4s var(--ease-out); }
.gal__thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gal__thumbs button:hover { opacity: .85; transform: translateY(-2px); }
.gal__thumbs button.on { opacity: 1; border-color: var(--acc-ink); box-shadow: 0 0 0 3px var(--acc-a25); }
.gal__thumbs button.on::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--acc-ink); transform-origin: left; animation: thumbTimer 5s linear; }
.gal__thumbs.paused button.on::after, .gal__thumbs button.is-vid::after { animation: none; }
.gal__thumbs button i { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8,6,14,.35); }
.gal__thumbs button i svg { width: 22px; height: 22px; padding: 6px 5px 6px 7px; border-radius: 50%; background: #fff; color: #0b0912; }
@keyframes thumbTimer { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* buy card */
.buy { position: sticky; top: 98px; border-radius: 22px; padding: 30px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid var(--line); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); overflow: hidden; isolation: isolate; }
.buy::before { content: ''; position: absolute; right: -30%; top: -40%; width: 90%; aspect-ratio: 1; z-index: -1; background: radial-gradient(closest-side, var(--acc-a25), transparent); }
.buy__flags { display: flex; gap: 8px; margin-bottom: 18px; }
.buy h1 { font-size: clamp(34px, 3.4vw, 50px); margin-bottom: 14px; }
.buy__lead { margin: 0 0 22px; color: var(--ink-2); }
.buy__fw { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.buy__fw span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 9px; background: rgba(255,255,255,.04); border: 1px solid var(--line); font: 600 semi-expanded 11px/1 var(--label); letter-spacing: .04em; }
.buy__fw span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
.buy__price { display: flex; align-items: baseline; gap: 12px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.buy__price b { font: 900 46px/1 var(--display); font-variation-settings: 'wdth' 108; letter-spacing: -.03em; }
.buy__price s { color: var(--ink-3); }
.buy__price small { margin-left: auto; font: 600 semi-expanded 11px/1.4 var(--label); color: var(--ink-3); text-align: right; }
.buy__acts { display: grid; gap: 10px; }
.buy__acts .btn { justify-content: center; padding: 0 26px; --h: 56px; }
.buy__acts .btn .ic { display: none; }
.buy__trust { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.buy__trust li { display: flex; gap: 12px; align-items: center; font-size: 13.5px; color: var(--ink-2); }
.buy__trust i { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--acc-a12); color: var(--acc-ink); }
.buy__trust i svg { width: 15px; height: 15px; }
.buy__pay { display: flex; gap: 8px; align-items: center; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font: 600 semi-expanded 10.5px/1 var(--label); letter-spacing: .08em; color: var(--ink-3); }
.buy__pay span { padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--ink-2); }

/* section tabs */
.ptabs { position: sticky; top: 78px; z-index: 30; margin-top: 70px; background: rgba(7,6,12,.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ptabs__in { position: relative; display: flex; gap: 4px; height: 58px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.ptabs__in > a { position: relative; z-index: 1; padding: 10px 16px; border-radius: 999px; font: 700 11px/1 var(--display); font-variation-settings: 'wdth' 112; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; transition: color .3s; }
.ptabs__in > a.on { color: #0b0912; }
.ptabs__pill { position: absolute; top: 50%; height: 34px; margin-top: -17px; border-radius: 999px; background: #fff; transition: left .5s var(--ease-out), width .5s var(--ease-out); }
.ptabs__buy { margin-left: auto; display: flex; align-items: center; gap: 14px; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease-out); pointer-events: none; }
.ptabs__buy.on { opacity: 1; transform: none; pointer-events: auto; }
.ptabs__buy b { font: 900 20px/1 var(--display); }

/* features */
.feat { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; padding: 60px 0; }
.feat + .feat { border-top: 1px solid var(--line); }
.feat:nth-child(even) .feat__img { order: 2; }
.feat__img { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16/9; background: var(--bg-3); }
.feat__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.6s var(--ease-out); }
.feat__img.in img { transform: scale(1); }
.feat__img::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), inset 0 -80px 80px -60px rgba(7,6,12,.8); }
.feat__n { font: 900 80px/1 var(--display); font-variation-settings: 'wdth' 120; color: transparent; -webkit-text-stroke: 1px var(--acc-a45); letter-spacing: -.04em; }
.feat h3 { font-size: clamp(30px, 3.2vw, 46px); margin: 14px 0 18px; }
.feat p { color: var(--ink-2); margin: 0 0 20px; }
.feat .ticks { margin: 0; }

/* specs */
.specs { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.spec { padding: 26px 24px; background: var(--bg); transition: background .3s; }
.spec:hover { background: var(--bg-2); }
.spec small { display: block; margin-bottom: 12px; font: 600 semi-expanded 10.5px/1 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.spec b { font: 700 16px/1.35 var(--body); }
.spec b em { font-style: normal; color: var(--acc-ink); }

.get { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 18px; }
.get__item { padding: 28px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.035), transparent); }
.get__item code { display: inline-block; margin-bottom: 18px; padding: 6px 10px; border-radius: 7px; background: var(--acc-a12); color: var(--acc-ink); font: 600 12.5px/1 var(--mono); }
.get__item p { margin: 0; color: var(--ink-2); font-size: 14px; }

/* faq */
.faq { max-width: 880px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 0; cursor: pointer; font: 700 19px/1.3 var(--display); font-variation-settings: 'wdth' 104; text-transform: uppercase; transition: color .3s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--acc-ink); }
.faq summary i { flex: none; position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); transition: transform .5s var(--ease-out), background .3s; }
.faq summary i::before, .faq summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: currentColor; }
.faq summary i::after { transform: rotate(90deg); transition: transform .5s var(--ease-out); }
.faq details[open] summary i { transform: rotate(180deg); background: var(--acc); border-color: var(--acc); }
.faq details[open] summary i::after { transform: rotate(0deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); }
.faq details[open] .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { margin: 0 0 26px; color: var(--ink-2); max-width: 720px; }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 99; display: grid; place-items: center; padding: 4vw; background: rgba(4,3,8,.92); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .4s; }
.lb.on { opacity: 1; pointer-events: auto; }
.lb img { max-height: 90vh; border-radius: 14px; transform: scale(.94); transition: transform .5s var(--ease-out); }
.lb.on img { transform: none; }

/* mobile buy bar */
.mbuy { display: none; }
@media (max-width: 1000px) {
  .ptop { grid-template-columns: 1fr; }
  .buy { position: relative; top: 0; }
  .feat, .feat:nth-child(even) { grid-template-columns: 1fr; }
  .feat:nth-child(even) .feat__img { order: 0; }
  .specs { grid-template-columns: repeat(min(2, var(--cols, 4)), 1fr); }
  .get { grid-template-columns: 1fr; }
  .gal__thumbs { grid-template-columns: repeat(4, 1fr); }
  .ptabs__buy { display: none; }
  .mbuy { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 18px; border-radius: 16px; background: rgba(14,11,24,.9); border: 1px solid var(--line-2); backdrop-filter: blur(16px); transform: translateY(140%); transition: transform .5s var(--ease-out); }
  .mbuy.on { transform: none; }
  body:has(.mbuy.on) .promo-pill, body:has(.mbuy.on) .promo { bottom: 84px; }
  .foot { padding-bottom: 96px; } /* room for the fixed buy bar */
  body.at-foot:has(.mbuy.on) .promo-pill, body.at-foot:has(.mbuy.on) .promo { bottom: 150px; }
  .mbuy div { flex: 1; min-width: 0; }
  .mbuy small { display: block; font: 600 semi-expanded 10px/1.3 var(--label); color: var(--ink-3); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mbuy b { font: 900 20px/1 var(--display); }
  .mbuy .btn { --h: 46px; padding: 0 22px; }
}
@media (max-width: 600px) {
  .specs { grid-template-columns: 1fr; }
  .buy { padding: 22px; }
  .feat__n { font-size: 56px; }
}

/* feature cards (features without a screenshot) */
.feat__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font: 800 semi-expanded 12px/1 var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--acc-ink); }
.feat__link span { transition: transform .4s var(--ease-out); }
.feat__link:hover span { transform: translateX(4px); }
.fcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fcards--lead { margin-top: 10px; }
.fcard { --mx: 50%; --my: 50%; position: relative; padding: 28px 26px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); overflow: hidden; isolation: isolate; transition: border-color .4s, transform .6s var(--ease-out); }
.fcard::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(320px circle at var(--mx) var(--my), var(--acc-a12), transparent 60%); }
.fcard:hover { border-color: var(--acc-a25); transform: translateY(-4px); }
.fcard:hover::before { opacity: 1; }
.fcard__ic { width: 46px; height: 46px; margin-bottom: 22px; border-radius: 13px; display: grid; place-items: center; background: var(--acc-a12); border: 1px solid var(--acc-a25); color: var(--acc-ink); transition: transform .6s var(--ease-out); }
.fcard:hover .fcard__ic { transform: rotate(-8deg) scale(1.05); }
.fcard__ic svg { width: 22px; height: 22px; }
.fcard h4 { margin: 0 0 8px; font: 800 17px/1.2 var(--display); font-variation-settings: 'wdth' 106; text-transform: uppercase; }
.fcard p { margin: 0; font-size: 14px; color: var(--ink-3); }
@media (max-width: 1000px) { .fcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fcards { grid-template-columns: 1fr; } }

/* ---------- live demo ---------- */
.demo { padding-top: 70px; }
.demo__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.demo__stage {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: #08090f; border: 1px solid var(--line-2);
  box-shadow: 0 50px 100px -40px rgba(0,0,0,.9), 0 0 120px -50px var(--acc);
}
.demo__stage::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 6; pointer-events: none;
  background: conic-gradient(from var(--spin), transparent 0 60%, var(--acc) 76%, var(--acc-2) 86%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 6s linear infinite; }
.demo__stage.is-live::before { animation: none; opacity: 0; transition: opacity .6s; }
.demo__stage:fullscreen { border-radius: 0; border: 0; aspect-ratio: auto; }
.demo__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; opacity: 0; transition: opacity .8s var(--ease-out); }
.demo__stage.is-live iframe { opacity: 1; }
.demo__poster { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background-size: cover; background-position: center; transition: opacity .7s var(--ease-out), visibility .7s; }
.demo__poster::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(8,6,16,.55), rgba(8,6,16,.88) 70%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.demo__stage.is-loading .demo__poster, .demo__stage.is-live .demo__poster { opacity: 0; visibility: hidden; }
.demo__launch { position: relative; display: grid; justify-items: center; gap: 10px; padding: 10px; text-align: center; }
.demo__play { position: relative; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: linear-gradient(135deg, var(--acc), var(--acc-2)); color: #fff; box-shadow: 0 0 0 10px rgba(155,77,255,.15), 0 20px 60px -10px var(--acc); transition: transform .6s var(--ease-out), box-shadow .6s; }
.demo__play::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(207,168,255,.5); animation: demoPulse 2.2s var(--ease-out) infinite; }
@keyframes demoPulse { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.demo__play svg { width: 32px; height: 32px; margin-left: 5px; }
.demo__launch:hover .demo__play { transform: scale(1.08); box-shadow: 0 0 0 16px rgba(155,77,255,.12), 0 24px 70px -10px var(--acc-2); }
.demo__launch b { margin-top: 14px; font: 900 clamp(22px, 2.6vw, 34px)/1 var(--display); font-variation-settings: 'wdth' 110; text-transform: uppercase; letter-spacing: -.01em; }
.demo__launch small { font: 700 semi-expanded 11.5px/1 var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.demo__loading { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 16px; font: 700 semi-expanded 12px/1 var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.demo__loading span { width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(255,255,255,.1); border-top-color: var(--acc-ink); animation: spinner .8s linear infinite; }
@keyframes spinner { to { transform: rotate(360deg); } }
.demo__stage.is-loading .demo__loading { opacity: 1; visibility: visible; }
.demo__fs { position: absolute; z-index: 5; right: 14px; top: 14px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(8,6,14,.65); border: 1px solid var(--line-2); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .3s, background .3s; }
.demo__fs svg { width: 18px; height: 18px; }
.demo__stage.is-live .demo__fs { opacity: .7; pointer-events: auto; }
.demo__stage.is-live:hover .demo__fs { opacity: 1; }
.demo__fs:hover { background: var(--acc); }

.demo__dock { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 28px; padding: 20px 24px; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); }
.dgroup h5 { margin: 0 0 10px; font: 800 semi-expanded 11px/1 var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.dgroup--row { display: grid; grid-template-columns: auto 1fr; gap: 14px; }
.dseg { display: flex; flex-wrap: wrap; gap: 6px; }
.dseg button, .dbtns button {
  height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03);
  font: 700 semi-expanded 11.5px/1 var(--label); letter-spacing: .03em; color: var(--ink-2);
  transition: background .25s, color .25s, border-color .25s, transform .3s var(--ease-out);
}
.dseg button:hover, .dbtns button:hover { color: var(--ink); border-color: var(--line-2); transform: translateY(-1px); }
.dseg button.on, .dbtns button.on { background: #fff; color: #0b0912; border-color: #fff; }
.dbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.dbtns button { display: flex; align-items: center; gap: 8px; height: 40px; text-align: left; }
.dbtns button svg { flex: none; width: 16px; height: 16px; color: var(--acc-ink); }
.dbtns button.on svg { color: var(--acc); }
.dsw { display: flex; gap: 8px; flex-wrap: wrap; }
.dsw button { width: 30px; height: 30px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); transition: transform .3s var(--ease-out), box-shadow .3s; }
.dsw button:hover { transform: scale(1.12); }
.dsw button.on { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--c), 0 0 18px var(--c); }
.demo__keys { flex-basis: 100%; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 2; color: var(--ink-3); }
.demo__keys kbd { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; margin: 0 2px 0 6px; border-radius: 6px; border: 1px solid var(--line-2); background: rgba(255,255,255,.05); font: 700 11px/1 var(--label); color: var(--ink); }
.demo__keys kbd:first-child { margin-left: 0; }

/* buy card shortcut */
.btn--demo { justify-content: center; --h: 50px; border: 1px dashed var(--acc-a45); background: var(--acc-a12); color: var(--ink); }
.btn--demo .ic { display: none; }
.btn--demo:hover { border-style: solid; background: var(--acc-a25); }
.demo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 rgba(91,227,164,.6); animation: ping 2s infinite; }

@media (max-width: 600px) {
  .demo__play { width: 64px; height: 64px; }
  .demo__dock { padding: 16px; }
  .demo__keys { display: none; }   /* no keyboard on phones */
}

/* ---- reviews ---------------------------------------------------------
   Carried over from the previous site. Built only from the design's own
   tokens; amber stars are the one borrowed convention, because a violet
   star does not read as a rating. */
.rev__list{display:grid;gap:14px;margin-bottom:26px}
.rev__item{border:1px solid var(--line);background:var(--bg-3);border-radius:var(--r);padding:16px 18px}
.rev__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.rev__head b{font-size:14px;font-weight:650}
.rev__head small{color:var(--ink-3);font-size:12px}
.rev__item p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.6}
.rev__stars{display:inline-flex;gap:2px}
.rev__stars i{width:15px;height:15px;display:block;color:var(--ink-4)}
.rev__stars i.on{color:#ffb020}
.rev__stars svg{width:100%;height:100%;display:block}
.rev__pick{display:inline-flex;gap:6px}
.rev__pick button{width:30px;height:30px;padding:0;border:0;background:none;cursor:pointer;color:var(--ink-4);transition:color .18s var(--ease),transform .18s var(--ease)}
.rev__pick button:hover{transform:translateY(-2px)}
.rev__pick button.on{color:#ffb020}
.rev__pick svg{width:100%;height:100%;display:block}
.rev__form{border-top:1px solid var(--line);padding-top:22px}

/* The full product title can be long; it wraps and shrinks instead of being
   cut off, because this is the page where the name has to be readable. */
.buy__name {
  font-size: clamp(26px, 3.1vw, 42px);
  line-height: 1.04;
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* Tebex bills this store in euros whatever the header is set to; the note
   sits with the price so it is read before the buy button, not after. */
.buy__fx {
  display: block;
  margin-top: 10px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 176, 32, .32);
  background: rgba(255, 176, 32, .10);
  border-radius: var(--r-sm);
  color: #ffd79a;
  font-size: 12.5px;
  line-height: 1.45;
}

/* The demo failed to boot. Same spot as the spinner, but it says so and
   leaves the visitor somewhere to go. */
.demo__stage.is-stuck .demo__loading { opacity: 1; visibility: visible; }
.demo__stage.is-stuck .demo__loading span { display: none; }
.demo__loading b { font: 900 19px/1.15 var(--display); font-variation-settings: 'wdth' 106; text-transform: uppercase; letter-spacing: -.01em; color: var(--ink); }
.demo__loading small { max-width: 34ch; text-align: center; font: 500 12.5px/1.5 inherit; letter-spacing: 0; text-transform: none; color: var(--ink-3); }