/* SaaS Kit Studio page: on top of the main page's style.css (tokens, type, buttons, tiles, FAQ, footer). */


/* ---------- hero ---------- */
.st-hero{position:relative;padding:72px 0 96px;overflow:hidden}
.st-hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);gap:40px;align-items:center}
.st-copy h1{margin:0 0 20px;font-size:clamp(36px,4.6vw,60px)}
.st-copy .lead{margin-bottom:32px}
.st-price{font-weight:700;opacity:.92}

.st-collage{position:relative;aspect-ratio:1.18;min-width:0}
.st-collage img{position:absolute;display:block;height:auto;border-radius:14px;box-shadow:0 30px 70px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)}
/* back to front: a project frame tilted behind, the main frame, a 3x2 strip of backgrounds and one playbook page */
.c-back{right:0;top:0;width:60%;transform:rotate(4deg);z-index:1;filter:brightness(.8)}
.c-main{left:0;top:14%;width:82%;border-radius:18px!important;z-index:2}
.c-bg{position:absolute;left:5%;bottom:0;width:48%;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:5px;border-radius:12px;background:rgba(5,5,7,.7);backdrop-filter:blur(8px);box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08);transform:rotate(-3deg);z-index:3}
.c-bg img{position:static!important;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px!important;box-shadow:none!important}
.c-page{right:4%;bottom:2%;width:21%;transform:rotate(7deg);border-radius:5px!important;z-index:4}

/* ---------- the panel inside ---------- */
.st-sum{display:grid;grid-template-columns:minmax(0,1.5fr) auto minmax(0,1fr);gap:22px;align-items:center}
.st-plus{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:28px;font-weight:700;color:#fff;background:linear-gradient(180deg,#9b70ff,#7c4ee8);box-shadow:0 0 0 6px var(--wash),0 10px 30px -8px var(--glow)}
.st-five{display:grid;gap:10px}
.st-fc{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:14px;padding:8px;border-radius:14px;background:var(--card);border:1px solid var(--line-soft);transition:border-color .2s,transform .2s var(--ease)}
.st-fc:hover{border-color:#3a3550;transform:translateX(3px)}
.st-fc img,.st-fc-v{width:96px;height:56px;border-radius:9px;object-fit:cover;object-position:left center;background:#0b0a11}
.st-fc-v{display:grid;place-items:center;position:relative;overflow:hidden;background:radial-gradient(80% 120% at 50% 100%,rgba(139,92,246,.45),transparent 70%),#0b0a11}
.st-fc-v b{font-size:22px;line-height:1;letter-spacing:-.03em}
.st-fc .t{display:flex;align-items:baseline;gap:10px;font-weight:700;font-size:15px}
.st-fc .t em{font-style:normal;font-size:11.5px;color:var(--accent-hi);font-variant-numeric:tabular-nums}
.st-panel{background:var(--ink-0);border:1px solid var(--pline);border-radius:var(--r-xl);padding:8px 18px 18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 40px 80px -40px rgba(91,47,201,.5)}
.mk.compact{padding:2px 16px 16px}
.mk.compact .mk-tg{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
.mk.compact .mk-tile{min-height:70px;font-size:11.5px;cursor:default}

/* ---------- in the box: the archive as a file manager ---------- */
.st-box-wrap{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:40px;align-items:center}
.st-box-wrap .sec-head{margin:0}
.st-fm{background:var(--ink-2);border:1px solid var(--pline);border-radius:var(--r-lg);overflow:hidden;font-size:14px}
.fm-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--pline-soft);background:var(--ink-0)}
.fm-bar .d{width:9px;height:9px;border-radius:50%;background:#2a2638}
.fm-bar .p{display:inline-flex;align-items:center;gap:8px;margin-left:10px;font-weight:700;color:var(--dim)}
.st-fm svg{width:17px;height:17px;flex:0 0 auto;color:var(--accent-hi)}
.fm-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) 80px;gap:14px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--pline-soft)}
.fm-row:last-child{border-bottom:0}
.fm-row .nm{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--text);min-width:0;overflow-wrap:anywhere}
.fm-row .ds{color:var(--mute)}
.fm-row .sz{text-align:right;color:var(--mute);font-size:12.5px;font-variant-numeric:tabular-nums}
.fm-foot{padding:12px 16px;text-align:right;font-size:12.5px;font-weight:700;color:var(--dim);background:var(--ink-0);border-top:1px solid var(--pline-soft)}

/* ---------- one section per thing ---------- */
.st-ih{max-width:720px;margin-bottom:36px}
.st-n{display:inline-block;font-size:13px;font-weight:700;color:var(--accent-hi);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.st-ih h3{margin:12px 0 14px;font-size:clamp(26px,3vw,38px);line-height:1.1;letter-spacing:-.025em}

.st-clips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.st-clip{margin:0}
.st-play{position:relative;display:block;width:100%;padding:0;border:0;background:none;border-radius:14px;overflow:hidden;cursor:pointer}
.st-clip video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;background:#0b0a11;border:1px solid var(--line-soft);transition:transform .5s var(--ease),filter .3s}
.st-play:hover video{transform:scale(1.02);filter:brightness(.85)}
.st-pb{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 10px;border-radius:999px;background:rgba(8,7,13,.62);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);color:#fff;font-weight:700;font-size:14px;transition:background .2s,border-color .2s}
.st-pb svg{width:16px;height:16px;padding:3px;box-sizing:content-box;border-radius:50%;background:linear-gradient(180deg,#9b70ff,#7c4ee8)}
.st-play:hover .st-pb{background:rgba(124,78,232,.9);border-color:transparent}
.st-play:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px}
.yt{padding:0;border:0;background:transparent;width:min(1100px,94vw);max-width:none;color:var(--text)}
.yt::backdrop{background:rgba(5,5,7,.82);backdrop-filter:blur(6px)}
.yt-box{border-radius:var(--r-lg);overflow:hidden;background:#000;border:1px solid var(--line);box-shadow:0 40px 120px -30px rgba(0,0,0,.9)}
.yt-frame{aspect-ratio:16/9}
.yt-frame iframe{display:block;width:100%;height:100%;border:0}
.yt-bar{display:flex;align-items:center;gap:16px;padding:12px 16px;background:var(--card)}
.yt-name{font-size:15px}
.yt-open{display:inline-flex;align-items:center;gap:6px;margin-left:auto;color:var(--accent-hi);font-weight:600;font-size:14px}
.yt-x{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--dim);font-size:20px;line-height:1;cursor:pointer}
.yt-x:hover{color:#fff;border-color:#3a3550}
.st-clip figcaption{display:flex;gap:10px;align-items:baseline;margin-top:10px;font-size:13.5px;color:var(--mute)}
.st-clip figcaption b{color:var(--text);font-size:14.5px}

.st-bgs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.st-bg{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:16/9;background:#0b0a11}
.st-bg img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.st-bg:hover{z-index:2}
.st-bg:hover img{transform:scale(1.03)}

.st-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.st-split.rev>:first-child{order:2}
.st-quote{margin:4px 0 0;padding:22px 24px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line-soft);max-width:520px}
.st-quote blockquote{margin:0;font-size:22px;line-height:1.3;font-weight:700;letter-spacing:-.015em}
.st-pages{position:relative;height:440px}
.st-pages .pg{position:absolute;top:0;width:46%;height:auto;border-radius:6px;box-shadow:0 40px 80px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.08);
}
.st-pages .p0{left:3%;top:30px;transform:rotate(-7deg)}
.st-pages .p2{right:3%;top:30px;transform:rotate(7deg)}
.st-pages .p1{left:27%;z-index:2}
.st-pages::after{content:"";position:absolute;left:10%;right:10%;bottom:-20px;height:160px;background:radial-gradient(closest-side,rgba(59,29,122,.7),transparent);filter:blur(30px);z-index:-1}
.st-phases{margin-top:40px;border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;background:var(--card);font-variant-numeric:tabular-nums}
.ph-h,.ph-r{display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,1.6fr) 130px;gap:16px;padding:13px 20px;align-items:center}
.ph-h{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--line-soft)}
.ph-r{border-bottom:1px solid var(--line-soft);font-size:15px;color:var(--dim)}
.ph-r:last-child{border-bottom:0}
.ph-r .k{color:var(--accent-hi);font-weight:700}
.ph-r b{color:var(--text)}
.ph-r .t{text-align:right;color:var(--mute)}
.ph-r.plus{background:rgba(139,92,246,.05)}

.st-shot{width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--line-soft);box-shadow:0 40px 80px -40px rgba(91,47,201,.45)}

.st-tl{max-width:900px;padding:28px;border-radius:var(--r-xl);background:var(--card);border:1px solid var(--line-soft)}
.vt-marks{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:18px;padding-left:76px}
.vt-marks span{display:flex;flex-direction:column;font-size:12.5px;color:var(--mute)}
.vt-marks b{font-size:22px;color:var(--text);letter-spacing:-.02em}
.vt-bar{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;margin-top:10px;font-size:13px;font-weight:700;color:var(--dim)}
.vt-bar i{display:block;height:10px;border-radius:999px}
.vt-bar.studio i{width:100%;background:var(--grad);box-shadow:0 0 18px var(--glow)}
.vt-bar.kit i{width:72%;background:#3a3550}

/* ---------- compare ---------- */
.st-cmp{border:1px solid var(--line-soft);border-radius:var(--r-xl);overflow:hidden;background:var(--card)}
.cm-r{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);align-items:center;border-bottom:1px solid var(--line-soft)}
.cm-r{align-items:stretch}
.cm-r>span{display:flex;align-items:center;justify-content:center;padding:15px 20px;font-size:15px;color:var(--dim);min-width:0}
.cm-r>span:first-child{flex-direction:column;align-items:flex-start;justify-content:center}
.cm-r>span:first-child{color:var(--text)}
.cm-r>span:nth-child(n+2){text-align:center}
.cm-r .s{background:rgba(139,92,246,.07);border-left:1px solid rgba(139,92,246,.25);border-right:1px solid rgba(139,92,246,.25)}
.cm-h>span{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.cm-h .s{color:var(--accent-hi)}
.cm-r svg.ok{width:18px;height:18px;color:var(--accent-hi);display:inline-block}
.cm-r .no{color:#4b4760}
.cm-p>span{font-size:20px;font-weight:700;color:var(--text)!important;font-variant-numeric:tabular-nums}
.cm-b{border-bottom:0}
.cm-b .btn{min-height:44px}
.st-enough{margin-top:22px;padding:26px 28px;max-width:760px}
.st-enough h3{margin-bottom:8px}
.st-enough p{color:var(--dim)}


/* ---------- smaller screens ---------- */
@media (max-width:1000px){
  .st-hero .wrap,.st-split,.st-box-wrap{grid-template-columns:1fr;gap:36px}
  .st-sum{grid-template-columns:1fr;justify-items:stretch}
  .st-plus{justify-self:center}
  .st-split.rev>:first-child{order:0}
  .st-bgs{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:700px){
  .st-hero{padding:40px 0 64px}
  .st-clips{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--gut));padding:0 var(--gut) 8px;gap:12px}
  .st-clip{flex:0 0 86%;scroll-snap-align:center}
  .st-bgs{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .st-pages{height:300px}
  .ph-h{display:none}
  .ph-r{grid-template-columns:36px minmax(0,1fr) auto;gap:4px 12px;padding:12px 16px}
  .ph-r>span:nth-child(3){grid-column:2 / 4;grid-row:2;font-size:13.5px;color:var(--mute)}
  .fm-row{grid-template-columns:minmax(0,1fr) auto}
  .fm-row .ds{grid-column:1 / -1;grid-row:2;font-size:13px;padding-left:27px}
  .cm-r{grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr) minmax(0,.85fr)}
  .cm-r>span{padding:12px 10px;font-size:13.5px}
  .cm-b .btn{padding:0 12px;font-size:13px}
  .vt-marks{padding-left:0}
  .vt-bar{grid-template-columns:52px minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.st-bg img{transition:none}}
.cm-b .btn svg{width:16px;height:16px}

/* ---------- the reframe: a version page of one product (STUDIO_PAGE_REFRAME.md) ---------- */
.st-crumb{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:15px;font-weight:600;color:var(--dim)}
.st-crumb a{color:var(--accent-hi)}
.st-crumb a:hover{color:#fff}
.st-crumb span[aria-hidden]{color:#4b4760}
.st-copy h1{margin:0 0 20px}

/* the hero equation: the overview's panel + the kit = Studio */
.st-eq{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;align-items:center;gap:10px;min-width:0}
.eq-panel{width:244px;height:282px;overflow:hidden;border-radius:14px;box-shadow:0 30px 70px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.05)}
.eq-scale{width:480px;transform:scale(.508);transform-origin:top left}
.eq-scale .mk{min-height:552px;border-radius:24px}
.eq-op{font-size:30px;font-weight:300;color:var(--accent-hi);line-height:1}
.st-collage.eq-stack{aspect-ratio:1.05;min-width:300px}
/* the stack in the equation: the same four pictures, overlapping tighter and larger than the old hero collage */
.eq-stack .c-back{right:0;top:2%;width:70%}
.eq-stack .c-main{left:0;top:15%;width:90%}
.eq-stack .c-bg{left:4%;bottom:2%;width:56%;padding:4px;gap:4px}
.eq-stack .c-page{right:0;bottom:0;width:26%}
.eq-res{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.eq-res b{font-size:28px;letter-spacing:-.03em;line-height:1}
.eq-res span{font-size:13px;font-weight:600;color:var(--mute);white-space:nowrap}

/* the difference at a glance */
.cm-sub{display:block;margin-top:3px;font-size:13px;color:var(--mute)}
.cm-link{display:inline-flex;align-items:center;gap:10px;color:var(--text)}
.cm-link:hover{color:var(--accent-hi)}
.cm-plus{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#2E1065;color:#C9B8FF;font-size:14px;line-height:1}

.st-choose-gap{margin-top:0}
#choose-sec .st-enough{margin-top:22px}

@media (max-width:1100px){.st-eq{grid-template-columns:auto auto minmax(0,1fr);row-gap:18px}.st-eq .eq-op:nth-of-type(2),.eq-res{grid-column:auto}}
@media (max-width:1000px){.st-eq{grid-template-columns:1fr;justify-items:center}.eq-op{transform:none}.st-collage.eq-stack{width:min(420px,100%)}.eq-res{align-items:center}}