/*
 * Shared skin for the standalone product pages (/commander, /stemix, /aux).
 * Lifted verbatim from public/plugin-closer.html so the four product pages read
 * as one family; that page keeps its own inline copy because it predates this
 * file and is passed around forums as a single self-contained document.
 *
 * Each page sets its own --brand pair before this loads. Everything else —
 * type scale, rules, feature rows, the kbd/chip vocabulary — is shared.
 */
:root{
  /* StudiOS lime — the single accent (see NEWFRONTEND/styles/theme-v2.css).
     It is a budget: lime marks action, selection and focus. Numbering,
     taxonomy, rules and decoration stay monochrome, or none of it means
     anything. --brand-ink is the dark ink that sits ON the lime fill. */
  --brand:#CAF225;--brand-rgb:202,242,37;--brand-ink:#0a0a0a;--bg:#0a0a0a;--fg:#e6e6df
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:'Archivo',sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%}
.eyebrow{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12px;font-weight:500;letter-spacing:.26em;color:#8f8f88}
.sg{font-family:'Space Grotesk',sans-serif}
.mono{font-family:ui-monospace,'SF Mono',Menlo,monospace}
[data-reveal]{animation:pc-fadeup .9s both;animation-timeline:view();animation-range:entry 0% cover 24%}
@keyframes pc-fadeup{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes pc-fadein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--brand);color:var(--brand-ink);font-weight:600;font-size:15.5px;padding:14px 26px;border-radius:12px;border:0;cursor:pointer;transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(var(--brand-rgb),.35)}
.ghost{color:#d6d6cf;font-size:15px;display:inline-flex;align-items:center;gap:9px;transition:color .25s}
.ghost:hover{color:var(--brand)}
.divider{height:1px;max-width:1200px;margin:0 auto;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
.featrow{display:flex;align-items:center;gap:14px;min-width:0;padding:14px 10px;border-bottom:1px solid rgba(255,255,255,.07);transition:background .25s,padding-left .25s}
.featrow:hover{background:rgba(255,255,255,.025);padding-left:16px}
.featrow .n{color:#55554f;font-size:12px}
.featrow .t{font-weight:600;font-size:15px}
.featrow .arrow{margin-left:auto;color:#3d3d39;font-size:12.5px;transition:color .25s}
.featrow:hover .arrow{color:var(--brand)}
.chip{font-size:10.5px;font-weight:600;color:var(--brand);background:rgba(var(--brand-rgb),.1);border:1px solid rgba(var(--brand-rgb),.3);border-radius:999px;padding:3px 10px;white-space:nowrap}
.chip-mute{color:#8f8f88;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
kbd{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12.5px;color:#e6e6df;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-bottom-width:2px;border-radius:7px;padding:5px 9px}
.card{padding:26px;border-radius:16px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.02)}
.card-n{font-family:ui-monospace,'SF Mono',Menlo,monospace;color:#55554f;font-size:12px;margin-bottom:14px}
.card-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px;letter-spacing:-.01em}
.card-body{font-size:13.5px;font-weight:300;line-height:1.55;color:#8f8f88;margin-top:6px}
.h1{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(48px,6.4vw,100px);line-height:1;letter-spacing:-.035em;margin:24px 0 20px}
/* Every headline line stays on ONE line: the spans are inline-block + nowrap so
   they take their intrinsic text width, and fitHeadline() in _product-shared.js
   shrinks the h1 until the widest line fits. A clamp alone cannot do this —
   the five languages have very different line lengths. */
.h1 .up,.h1 .down{display:inline-block;white-space:nowrap;max-width:100%}
.h1 .up{background:linear-gradient(180deg,#ffffff 30%,#c9c9c2 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.h1 .down{background:linear-gradient(180deg,#8f8f88 15%,#6e6e67 60%,#55554f 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.h2{font-family:'Space Grotesk',sans-serif;text-wrap:balance;font-weight:600;font-size:clamp(30px,4vw,56px);letter-spacing:-.03em;line-height:1.05;margin:0 0 14px}
.lead{font-size:17px;font-weight:300;line-height:1.6;color:#a8a8a1;max-width:640px}
.sublead{font-size:15.5px;font-weight:300;color:#8f8f88;max-width:560px}
.strong{font-weight:600;color:#f2f2ee}
/* screenshot plate — the frame every real capture sits in */
.plate{border-radius:16px;border:1px solid rgba(255,255,255,.1);background:#0e0e0d;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.plate-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.07)}
.plate-dot{width:10px;height:10px;border-radius:50%;background:#3d3d39}
.plate-name{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;color:#c9c9c2;margin-left:8px}
.plate-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:10px;color:var(--brand)}
.plate-live i{width:6px;height:6px;border-radius:50%;background:var(--brand);display:block}
.cap{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:11px;letter-spacing:.14em;color:#6e6e67;margin-top:14px;text-align:center}
/* price columns */
.price{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:900px;margin:0 auto}
.price-col{text-align:left;padding:30px;border-radius:16px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:12px}
.price-col.lit{border-color:rgba(var(--brand-rgb),.42);background:rgba(var(--brand-rgb),.045)}
.price-k{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:11px;letter-spacing:.2em;color:#8f8f88}
.price-v{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:34px;letter-spacing:-.03em;line-height:1}
.price-note{font-size:13.5px;font-weight:300;line-height:1.55;color:#8f8f88}
.price-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:4px}
.price-list li{font-size:13.5px;font-weight:300;color:#a8a8a1;display:flex;gap:10px;align-items:flex-start}
.price-list li::before{content:'—';color:#55554f;flex:none}
.price-col.lit .price-list li::before{color:var(--brand)}
input[type=email]{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:12px;color:#f2f2ee;font-family:'Archivo',sans-serif;font-size:15px;padding:14px 18px;flex:1;min-width:0;outline:none;transition:border-color .25s}
input[type=email]:focus{border-color:rgba(var(--brand-rgb),.6)}
@media(max-width:760px){
  .h1{font-size:min(46px,9vw)!important}
  .pad{padding-left:22px!important;padding-right:22px!important}
  .navcta{display:none!important}
  .cols2,.cols3,.price{grid-template-columns:1fr!important}
}