/* Buildr — showcase (English demo pages under /showcase).
   Shared chrome for the index and the demo pages. A demo page only needs
   /css/tailwind.css?v=29 + this file; page-specific CSS stays inline in the page.

   Contents
   1. Base + helpers copied from index.html's inline <style> (liquid-glass,
      card-hover, sheen, play-ring, keyframes) so demo pages need no copy.
   2. Showcase chrome: eyebrow, status chips (.chip), buttons (.sc-btn),
      the card grid (.sc-grid / .sc-card), the "how" steps, the CTA row.
   3. Device panel (.device) with title bar, screen, stepper and the sticky
      action bar at the bottom — used by every demo page.
   4. Trailer modal (<dialog class="trailer">) built by showcase.js.
   5. Phone + reduced-motion rules. */

/* ═══ 1. Base + helpers ═══ */
html,body{font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;margin:0;background:#0e111b;color:#fff}
::selection{background:rgba(91,140,255,.3)}
html{scroll-behavior:smooth}
.liquid-glass{background:rgba(255,255,255,0.01);background-blend-mode:luminosity;backdrop-filter:blur(4px);border:none;box-shadow:inset 0 1px 1px rgba(255,255,255,0.1);position:relative;overflow:hidden}
.liquid-glass::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;background:linear-gradient(180deg,rgba(255,255,255,0.45) 0%,rgba(255,255,255,0.15) 20%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,0.15) 80%,rgba(255,255,255,0.45) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
/* transform only, never opacity: if an animation never runs, the text is simply there */
@keyframes fadeUp{from{transform:translateY(12px)}to{transform:translateY(0)}}
@keyframes fadeDown{from{transform:translateY(-10px)}to{transform:translateY(0)}}
@keyframes pulseRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}
@keyframes playPulse{0%{transform:scale(1);opacity:.55}70%{opacity:0}100%{transform:scale(1.55);opacity:0}}
@keyframes sheenSweep{from{left:-150%}to{left:150%}}
@keyframes scPulse{0%,100%{opacity:1}50%{opacity:.45}}
.fade-up{animation:fadeUp .7s cubic-bezier(.22,1,.36,1) both}
.fade-up.d1{animation-delay:.08s}.fade-up.d2{animation-delay:.16s}.fade-up.d3{animation-delay:.24s}.fade-up.d4{animation-delay:.32s}
.fade-down{animation:fadeDown .6s ease-out both}
.card-hover{--accent:91,140,255;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease}
.card-hover:hover{transform:translateY(-6px);box-shadow:0 24px 60px -18px rgba(var(--accent),.45),inset 0 1px 1px rgba(255,255,255,.16)}
.sheen{position:relative}
.sheen::after{content:'';position:absolute;top:0;left:-150%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent);transform:skewX(-18deg);transition:none;pointer-events:none}
.sheen:hover::after{animation:sheenSweep .9s ease}
.grow-icon{transition:transform .4s cubic-bezier(.22,1,.36,1)}
.card-hover:hover .grow-icon{transform:scale(1.12) rotate(-3deg)}
.play-ring{position:absolute;inset:-5px;border-radius:999px;border:2px solid rgba(255,255,255,.45);animation:playPulse 2.6s cubic-bezier(.2,.6,.3,1) infinite;pointer-events:none}
/* a11y: visible focus everywhere, tap targets never smaller than 44px */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid #a8c8ff;outline-offset:3px;border-radius:.5rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ═══ 2. Showcase chrome ═══ */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:600}
.eyebrow i{width:.4rem;height:.4rem;border-radius:99px;background:#5B8CFF;box-shadow:0 0 10px rgba(91,140,255,.7);flex:none}
.eyebrow.teal i{background:#2dd4bf;box-shadow:0 0 10px rgba(45,212,191,.7)}
.eyebrow.violet i{background:#8b5cf6;box-shadow:0 0 10px rgba(139,92,246,.7)}
.eyebrow.amber i{background:#fbbf24;box-shadow:0 0 10px rgba(251,191,36,.7)}
.sc-h1{font-size:clamp(2.6rem,9vw,5.2rem);font-weight:800;letter-spacing:-.04em;line-height:1.02;text-wrap:balance}
.sc-h2{font-size:clamp(1.7rem,5vw,2.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
.sc-lead{color:rgba(255,255,255,.66);font-size:1.05rem;line-height:1.65;max-width:34rem;text-wrap:pretty}
/* live strip: "9 automations live · …" */
.sc-strip{display:inline-flex;align-items:center;gap:.6rem;flex-wrap:wrap;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.5rem 1rem .5rem .8rem;font-size:.82rem;color:rgba(255,255,255,.78);background:rgba(12,14,21,.45)}
.sc-strip b{color:#fff;font-weight:600}
.sc-strip .dot{position:relative;width:.55rem;height:.55rem;border-radius:99px;background:#4ade80;box-shadow:0 0 10px #4ade80;flex:none}
.sc-strip .dot::after{content:'';position:absolute;inset:0;border-radius:99px;background:#4ade80;animation:pulseRing 1.8s ease-out infinite}
.sc-strip .sep{color:rgba(255,255,255,.3)}

/* status chips. Variants: --live (green), --dev (blue), --pilot (amber), --study (teal) */
.chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.8125rem;font-weight:600;line-height:1;padding:.4rem .65rem;border-radius:999px;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.62);background:rgba(255,255,255,.03);white-space:nowrap;max-width:100%}
.chip i{width:.42rem;height:.42rem;border-radius:99px;background:currentColor;flex:none}
.chip--live{color:#4ade80;border-color:rgba(74,222,128,.3);background:rgba(74,222,128,.08)}
.chip--live i{box-shadow:0 0 8px #4ade80;animation:scPulse 2.2s ease-in-out infinite}
.chip--dev{color:#a8c8ff;border-color:rgba(91,140,255,.35);background:rgba(91,140,255,.1)}
.chip--dev i{background:#5B8CFF;box-shadow:0 0 8px rgba(91,140,255,.8)}
.chip--pilot{color:#fbbf24;border-color:rgba(251,191,36,.32);background:rgba(251,191,36,.08)}
.chip--pilot i{box-shadow:0 0 8px rgba(251,191,36,.8)}
.chip--study{color:#2dd4bf;border-color:rgba(45,212,191,.32);background:rgba(45,212,191,.08)}
.chip--study i{box-shadow:0 0 8px rgba(45,212,191,.8)}
.chip--warn{color:#fb923c;border-color:rgba(251,146,60,.35);background:rgba(251,146,60,.08)}
.chip--muted{color:rgba(255,255,255,.5)}
.chip--sm{font-size:.8125rem;padding:.3rem .5rem}
.chip.wrap{white-space:normal;line-height:1.25;text-align:left}

/* buttons: ≥44px tall, pill. --primary white, --ghost bordered, --accent blue, --wa green */
.sc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.65rem 1.15rem;border-radius:999px;font-size:.88rem;font-weight:600;letter-spacing:-.01em;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease,background-color .2s ease,border-color .2s ease,color .2s ease;-webkit-tap-highlight-color:transparent}
.sc-btn svg{width:1rem;height:1rem;flex:none}
.sc-btn:active{transform:translateY(0) scale(.98)}
.sc-btn--primary{background:#fff;color:#000}
.sc-btn--primary:hover{background:rgba(255,255,255,.92);transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(255,255,255,.35)}
.sc-btn--ghost{color:rgba(255,255,255,.82);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.03)}
.sc-btn--ghost:hover{border-color:rgba(91,140,255,.6);color:#fff;background:rgba(91,140,255,.12);transform:translateY(-2px)}
.sc-btn--accent{background:#5B8CFF;color:#0b1020;box-shadow:0 10px 26px -8px rgba(91,140,255,.75)}
.sc-btn--accent:hover{background:#6f9bff;transform:translateY(-2px)}
.sc-btn--wa{color:#4ade80;border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.08)}
.sc-btn--wa:hover{background:rgba(74,222,128,.16);border-color:#4ade80;color:#fff;transform:translateY(-2px)}
.sc-btn[disabled],.sc-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.sc-btn--block{width:100%}

/* card grid */
.sc-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media (min-width:768px){.sc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}}
@media (min-width:1200px){.sc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sc-card{display:flex;flex-direction:column;min-height:72px;border-radius:1rem}
.sc-card[data-accent="teal"]{--accent:45,212,191}
.sc-card[data-accent="violet"]{--accent:139,92,246}
.sc-card[data-accent="amber"]{--accent:251,191,36}
.sc-card[data-accent="green"]{--accent:74,222,128}
.sc-card[data-accent="sky"]{--accent:56,189,248}
.sc-card[data-accent="pink"]{--accent:244,114,182}
.sc-thumb{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:#0c0e15;border:0;padding:0;margin:0;cursor:pointer;color:inherit;text-align:left;font:inherit}
.sc-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.sc-thumb:hover img{transform:scale(1.04)}
.sc-thumb .shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(22,26,38,0) 40%,rgba(22,26,38,.92) 100%)}
.sc-thumb .tag{position:absolute;top:.75rem;left:.75rem;display:inline-flex;align-items:center;gap:.35rem;font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:.3rem .6rem;border-radius:999px;border:1px solid rgba(91,140,255,.35);color:#a8c8ff;background:rgba(12,14,21,.72)}
.sc-thumb .tag svg{width:.7rem;height:.7rem}
.sc-thumb .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.sc-thumb .play span{position:relative;width:3.5rem;height:3.5rem;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(12,14,21,.6);border:1px solid rgba(255,255,255,.3);transition:transform .3s ease}
.sc-thumb:hover .play span{transform:scale(1.1)}
.sc-thumb .play svg{width:1.25rem;height:1.25rem;margin-left:2px;color:#fff}
.sc-thumb .dur{position:absolute;right:.75rem;bottom:.75rem;font-size:.8125rem;font-weight:600;color:rgba(255,255,255,.85);background:rgba(12,14,21,.75);border:1px solid rgba(255,255,255,.14);border-radius:.4rem;padding:.2rem .45rem;font-variant-numeric:tabular-nums}
/* schematic preview for demo-only cards (no trailer): a tiny fake UI */
.sc-thumb--demo{cursor:default;display:flex;align-items:center;justify-content:center;padding:2.5rem 1.1rem .9rem;background:linear-gradient(160deg,#121521,#0c0e15)}
.sc-thumb--demo .tag{border-color:rgba(45,212,191,.35);color:#2dd4bf}
.sc-thumb--demo .ui{width:100%;max-width:19rem;display:flex;flex-direction:column;gap:.4rem;font-size:.8125rem;color:rgba(255,255,255,.6)}
.sc-thumb--demo .row{display:flex;align-items:center;gap:.5rem;padding:.42rem .6rem;border-radius:.5rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.sc-thumb--demo .row b{color:rgba(255,255,255,.85);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-thumb--demo .row .ln{height:.3rem;border-radius:99px;background:rgba(255,255,255,.14);flex:1}
.sc-thumb--demo .row .ln.s{flex:.5}
.sc-thumb--demo .row .r{margin-left:auto}
.sc-thumb--demo .arrow{align-self:center;color:rgba(255,255,255,.3);line-height:1;font-size:.8125rem}
.sc-body{display:flex;flex-direction:column;flex:1;padding:1.25rem 1.25rem 1.35rem}
.sc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}
.sc-title{font-size:1.1rem;font-weight:600;letter-spacing:-.01em;color:#fff;margin:0}
.sc-sub{margin:.55rem 0 0;color:rgba(255,255,255,.62);font-size:.9rem;line-height:1.55}
.sc-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:auto;padding-top:1.1rem}
.sc-actions .sc-btn{flex:1 1 auto;min-width:9rem}
.sc-num{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:.8rem;font-weight:700;font-size:.95rem;color:#a8c8ff;background:linear-gradient(140deg,rgba(91,140,255,.22),rgba(91,140,255,.05));border:1px solid rgba(91,140,255,.3);box-shadow:inset 0 1px 1px rgba(255,255,255,.14);flex:none}
.how-step{display:flex;gap:1rem;align-items:flex-start}
.how-step h3{margin:.2rem 0 .3rem;font-size:1.02rem;font-weight:600;color:#fff}
.how-step p{margin:0;color:rgba(255,255,255,.62);font-size:.92rem;line-height:1.6}
.how-step:nth-child(2) .sc-num{color:#5eead4;background:linear-gradient(140deg,rgba(45,212,191,.22),rgba(45,212,191,.05));border-color:rgba(45,212,191,.35)}
.how-step:nth-child(3) .sc-num{color:#86efac;background:linear-gradient(140deg,rgba(74,222,128,.22),rgba(74,222,128,.05));border-color:rgba(74,222,128,.35)}
/* CTA panel */
.sc-cta{position:relative;overflow:hidden;border-radius:1.5rem}
.sc-cta .glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px circle at 50% 0%,rgba(91,140,255,.16),transparent 70%)}
.sc-cta-row{display:grid;grid-template-columns:1fr;gap:.6rem}
@media (min-width:640px){.sc-cta-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.sc-cta-row{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* subpage footer */
.sc-footer{border-top:1px solid rgba(255,255,255,.1);padding:2rem 0;margin-top:2rem;font-size:.8125rem;color:rgba(255,255,255,.6);display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1rem;text-align:center}
@media (min-width:640px){.sc-footer{flex-direction:row;text-align:left}}
.sc-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem .6rem}
.sc-footer a{color:inherit;text-decoration:none;min-height:44px;min-width:44px;padding:0 .4rem;display:inline-flex;align-items:center;justify-content:center;transition:color .2s ease}
.sc-footer a:hover{color:#fff}
/* nav */
.sc-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 0}
.sc-nav .brand{font-weight:600;letter-spacing:-.01em;font-size:1.1rem;color:#fff;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;gap:.5rem}
.sc-nav .brand i{width:1.6rem;height:1.6rem;border-radius:.5rem;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:.9rem;background:linear-gradient(140deg,#5B8CFF,#1e2f6b);box-shadow:inset 0 1px 1px rgba(255,255,255,.3)}
.sc-nav .links{display:flex;align-items:center;gap:.25rem 1rem}
.sc-nav .links a:not(.sc-btn){color:rgba(255,255,255,.65);font-size:.86rem;font-weight:500;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;transition:color .2s ease}
.sc-nav .links a:not(.sc-btn):hover{color:#fff}
.sc-nav .sc-btn{min-height:44px;padding:.55rem 1rem;font-size:.84rem;white-space:nowrap}
.sc-nav .links a:not(.sc-btn){white-space:nowrap}
@media (max-width:359px){.sc-nav{gap:.5rem}.sc-nav .links{gap:.5rem}.sc-nav .sc-btn{padding:.5rem .8rem}.sc-nav .sc-btn svg{display:none}}
/* notes */
.sc-note{font-size:.8125rem;color:rgba(255,255,255,.5);line-height:1.5}
.sc-note b{color:rgba(255,255,255,.7);font-weight:600}
.sc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.sc-list li{position:relative;padding-left:1.4rem;color:rgba(255,255,255,.7);line-height:1.55;font-size:.95rem}
.sc-list li::before{content:"";position:absolute;left:.1rem;top:.6em;width:7px;height:7px;border-radius:99px;background:#5B8CFF;box-shadow:0 0 10px rgba(91,140,255,.7)}

/* ═══ 3. Device panel (demo pages) ═══ */
.device{position:relative;width:100%;max-width:440px;margin:0 auto;border-radius:1.5rem;background:#0c0e15;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 80px -30px rgba(0,0,0,.9),inset 0 1px 1px rgba(255,255,255,.07);display:flex;flex-direction:column;overflow:hidden;color:#fff}
.device-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08);flex:none}
/* the three macOS dots are direct children only; chips placed in .right keep their own <i> */
.device-bar > i{width:10px;height:10px;border-radius:99px;display:inline-block;flex:none}
.device-bar > i:nth-child(1){background:#ff5f57}.device-bar > i:nth-child(2){background:#febc2e}.device-bar > i:nth-child(3){background:#28c840}
.device-bar .label{margin-left:.5rem;font-size:.8125rem;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.device-bar .right{margin-left:auto;display:inline-flex;align-items:center;gap:.5rem}
.device-screen{position:relative;flex:1;padding:1.1rem 1rem 1.25rem;min-height:22rem;display:flex;flex-direction:column;gap:.9rem}
.device-screen.scroll{max-height:min(70vh,36rem);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.device-banner{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;line-height:1.35;color:#fbbf24;background:rgba(251,191,36,.08);border-bottom:1px solid rgba(251,191,36,.2);padding:.5rem .9rem;flex:none}
.device-banner i{width:.4rem;height:.4rem;border-radius:99px;background:#fbbf24;box-shadow:0 0 8px rgba(251,191,36,.8);flex:none}
/* stepper: showcase.js fills .stepper with one <i> per step */
.stepper{display:flex;gap:.3rem;height:.3rem;flex:none}
.stepper i{flex:1;border-radius:99px;background:rgba(255,255,255,.1);transition:background .35s ease,box-shadow .35s ease}
.stepper i.is-done{background:#5B8CFF}
.stepper i.is-active{background:#2dd4bf;box-shadow:0 0 10px rgba(45,212,191,.7)}
.stepper-label{font-size:.8125rem;color:rgba(255,255,255,.55);display:flex;justify-content:space-between;gap:.75rem;font-variant-numeric:tabular-nums}
.stepper-label b{color:rgba(255,255,255,.85);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* step panels: only hidden once the stepper is initialised (nothing hidden without JS) */
.stepper-on [data-step]{display:none}
.stepper-on [data-step].is-active{display:block}
.stepper-on [data-step].is-active.flex{display:flex}
.stepper-on [data-step].is-active.grid{display:grid}
.step-in{animation:fadeUp .4s cubic-bezier(.22,1,.36,1) both}
/* [hidden] must win over display rules such as .device-btn{display:inline-flex} */
.device [hidden],.device-actions [hidden],.showcase [hidden],.sc-card [hidden]{display:none!important}
/* sticky action bar at the bottom of the device */
.device-actions{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;gap:.5rem;padding:.75rem .9rem calc(.75rem + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(12,14,21,0),rgba(12,14,21,.96) 28%);border-top:1px solid rgba(255,255,255,.08);flex:none}
.device-actions .sc-btn{min-height:46px}
.device-actions .grow{flex:1}
.device-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.7rem 1.1rem;border-radius:.9rem;font-size:.95rem;font-weight:700;letter-spacing:-.01em;background:#fff;color:#000;border:0;cursor:pointer;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease,background-color .2s ease}
.device-btn:hover{background:rgba(255,255,255,.92);transform:translateY(-1px);box-shadow:0 14px 34px -12px rgba(255,255,255,.35)}
.device-btn:active{transform:translateY(0) scale(.98)}
.device-btn[disabled]{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.device-btn--ghost{flex:none;background:rgba(255,255,255,.05);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.14);min-width:48px;padding:.7rem .85rem}
.device-btn--ghost:hover{background:rgba(255,255,255,.1);box-shadow:none}
.device-btn--accent{background:#5B8CFF;color:#0b1020}
.device-btn--accent:hover{background:#6f9bff}
.device-btn svg{width:1.05rem;height:1.05rem;flex:none}
@media (max-width:360px){
  .device-actions{padding-left:.6rem;padding-right:.6rem;gap:.4rem}
  .device-btn{padding:.7rem .7rem;font-size:.9rem}
  .device-btn--ghost{min-width:44px;padding:.7rem .55rem}
  .sc-toggle{padding:.3rem .25rem;gap:.35rem}
  /* the toggle keeps its switch and its aria-label; the word is visually hidden */
  .sc-toggle .txt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}
/* auto-play toggle (a <button data-act="auto" aria-pressed>) */
.sc-toggle{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.3rem .4rem;border:0;background:none;color:rgba(255,255,255,.65);font:inherit;font-size:.8125rem;font-weight:600;cursor:pointer;border-radius:.6rem;flex:none;white-space:nowrap}
.sc-toggle .sw{position:relative;width:2.1rem;height:1.2rem;border-radius:99px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.12);transition:background .25s ease;flex:none}
.sc-toggle .sw::after{content:'';position:absolute;top:2px;left:2px;width:.85rem;height:.85rem;border-radius:99px;background:#fff;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.sc-toggle[aria-pressed="true"]{color:#fff}
.sc-toggle[aria-pressed="true"] .sw{background:#2dd4bf;border-color:#2dd4bf}
.sc-toggle[aria-pressed="true"] .sw::after{transform:translateX(.9rem);background:#0b1020}
.sc-toggle[disabled]{opacity:.4;cursor:not-allowed}
/* tabs at the bottom of the device (ops hub) */
.device-tabs{display:flex;border-top:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);flex:none}
.device-tabs button{flex:1;min-height:52px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;font:inherit;font-size:.8125rem;font-weight:600;color:rgba(255,255,255,.5);background:none;border:0;cursor:pointer;position:relative}
.device-tabs button svg{width:1.1rem;height:1.1rem}
.device-tabs button[aria-selected="true"]{color:#fff}
.device-tabs button[aria-selected="true"]::after{content:'';position:absolute;left:25%;right:25%;top:0;height:2px;border-radius:2px;background:#5B8CFF;box-shadow:0 0 10px rgba(91,140,255,.8)}
.device-tabs .badge{position:absolute;top:.3rem;right:calc(50% - 1.5rem);min-width:1.25rem;height:1.25rem;padding:0 .3rem;border-radius:99px;background:#fbbf24;color:#0b1020;font-size:.8125rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
/* generic bits for inner screens */
.d-row{display:flex;align-items:center;gap:.6rem;padding:.65rem .75rem;border-radius:.7rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);font-size:.82rem;line-height:1.35}
.d-row.is-clickable{cursor:pointer;transition:background .2s ease,border-color .2s ease}
.d-row.is-clickable:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.d-row b{color:#fff;font-weight:600}
.d-row small{color:rgba(255,255,255,.55);font-size:.8125rem}
.d-row .r{margin-left:auto;flex:none}
.d-card{border-radius:.9rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:.9rem}
.d-kicker{font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:600}
.d-explainer{font-size:.9rem;color:rgba(255,255,255,.66);line-height:1.55;max-width:36rem;margin-left:auto;margin-right:auto;text-align:center}
.d-explainer b{color:#fff;font-weight:600}

/* inline video frame (same look as the blog pages' .videoframe) */
.videoframe{position:relative;border-radius:18px;overflow:hidden;background:#0c0e15}
.videoframe video{display:block;width:100%;height:auto;aspect-ratio:16/9}
.videoframe .bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)}
.videoframe .bar > i{width:10px;height:10px;border-radius:99px;display:inline-block;flex:none}
.videoframe .bar > i:nth-child(1){background:#ff5f57}.videoframe .bar > i:nth-child(2){background:#febc2e}.videoframe .bar > i:nth-child(3){background:#28c840}
.videoframe .bar .label{margin-left:.5rem;font-size:.8125rem;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ═══ 4. Trailer modal (built by showcase.js) ═══ */
dialog.trailer{border:0;padding:0;margin:auto;background:transparent;max-width:min(96vw,64rem);width:100%;color:#fff;overflow:visible}
dialog.trailer::backdrop{background:rgba(5,7,12,.86);backdrop-filter:blur(8px)}
dialog.trailer[open]{animation:fadeUp .3s cubic-bezier(.22,1,.36,1)}
.trailer-box{border-radius:1.1rem;overflow:hidden;background:#0c0e15;border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 120px rgba(0,0,0,.8),inset 0 1px 1px rgba(255,255,255,.08)}
.trailer-bar{display:flex;align-items:center;gap:6px;padding:8px 8px 8px 14px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)}
.trailer-bar i{width:10px;height:10px;border-radius:99px;display:inline-block}
.trailer-bar i:nth-child(1){background:#ff5f57}.trailer-bar i:nth-child(2){background:#febc2e}.trailer-bar i:nth-child(3){background:#28c840}
.trailer-bar .label{margin-left:.5rem;font-size:.8125rem;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trailer-x{margin-left:auto;width:44px;height:44px;border-radius:.7rem;border:0;background:none;color:rgba(255,255,255,.65);font-size:1.3rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color .2s ease,background .2s ease}
.trailer-x:hover{color:#fff;background:rgba(255,255,255,.08)}
dialog.trailer video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000;max-height:calc(100vh - 7rem);max-height:calc(100dvh - 7rem)}
body.sc-lock{overflow:hidden}

/* ═══ 5. Phone + reduced motion ═══ */
@media (max-width:768px){
  html,body{overflow-x:hidden;overflow-x:clip}
  .liquid-glass{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(18,21,32,.55)}
  .sc-nav{padding:.9rem 0}
  .sc-actions .sc-btn{flex:1 1 100%}
  .device{max-width:none;border-radius:1.25rem}
  dialog.trailer{max-width:100vw;width:100vw}
  .trailer-box{border-radius:.9rem}
}
@media (max-width:420px){
  .sc-strip{font-size:.8125rem;padding:.45rem .85rem .45rem .7rem}
  .sc-strip .sep{display:none}
  .sc-thumb--demo .ui{gap:.3rem}
  .sc-thumb--demo .row{padding:.3rem .5rem}
  .sc-thumb--demo .arrow{line-height:.8}
  .sc-head{flex-direction:column;align-items:flex-start;gap:.5rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .play-ring{animation:none;opacity:.35}
  .sheen:hover::after{animation:none}
  .card-hover:hover{transform:none}
  .fade-up,.fade-down,.step-in{animation:none;transform:none}
  .sc-strip .dot::after,.chip--live i{animation:none}
}