.studio-smart{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;align-items:center}
.studio-smart input[type=search]{flex:3;min-width:220px;padding:10px 12px;border-radius:10px;border:1px solid #dbe7ef}
.studio-smart .studio-grid{flex-basis:100%}
.studio-layout{display:grid;grid-template-columns:1fr 340px;gap:18px;margin-top:14px}
@media(max-width:900px){.studio-layout{grid-template-columns:1fr}}
.studio-search{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.studio-search input[type=search]{flex:2;min-width:200px;padding:10px 12px;border-radius:10px;border:1px solid #dbe7ef}
.studio-search select{padding:10px;border-radius:10px;border:1px solid #dbe7ef}
.studio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.studio-card{border:1px solid #e3eef4;border-radius:12px;overflow:hidden;background:#fff}
.studio-card img{width:100%;height:150px;object-fit:cover;background:#f2f7fa;display:block}
.studio-card-b{padding:8px;display:grid;gap:6px}
.studio-pack{border:1px solid #e3eef4;border-radius:14px;padding:14px;background:#fbfdff;height:fit-content;position:sticky;top:12px}
.studio-pack-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.studio-pack input{padding:9px 10px;border-radius:10px;border:1px solid #dbe7ef;width:100%}
.studio-pack ol{margin:8px 0;padding-left:20px;display:grid;gap:6px;max-height:320px;overflow:auto}
.studio-actions{display:flex;gap:8px;margin-top:8px}
/* --- restructure: tabs, topbar, steps, rich cards --- */
.studio-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 4px}
.studio-tabs [role=tab]{padding:9px 16px;border-radius:999px;border:1px solid #dbe7ef;background:#fff;cursor:pointer;font-weight:600}
.studio-tabs [role=tab].on{background:#0aa9b5;border-color:#0aa9b5;color:#fff}
.studio-topbar{position:sticky;top:0;z-index:30;display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:#f2fbfc;border:1px solid #d5ecef;border-radius:14px;padding:10px 14px;margin:12px 0}
.studio-topbar-btns{display:flex;gap:8px;margin-left:auto;align-items:center}
.studio-step{border:1px solid #e3eef4;border-radius:12px;margin:8px 0;background:#fff}
.studio-step>summary{padding:10px 12px;cursor:pointer;list-style:none}
.studio-step>summary::-webkit-details-marker{display:none}
.studio-step>summary strong{font-size:.95rem}
.studio-step .studio-pack-grid,.studio-step input#studioName{margin:0 10px 10px}
.studio-step input#studioName{width:calc(100% - 20px)}
.studio-wizard{border:1px dashed #cfdfe7;border-radius:12px;padding:10px 12px;margin:8px 0;background:#fdfeff}
.studio-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) !important}
.studio-card{transition:transform .15s ease,box-shadow .15s ease}
.studio-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(10,169,181,.15)}
.studio-thumb{position:relative;background:#f2f7fa}
.studio-thumb img{width:100%;height:170px;object-fit:cover;display:block}
.studio-heart{position:absolute;top:6px;right:6px;background:rgba(255,255,255,.92) !important;border-radius:50% !important;min-width:32px;height:32px;padding:0 !important}
.studio-pages{position:absolute;bottom:6px;left:6px;background:rgba(10,169,181,.92);color:#fff;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px}
.studio-card-b strong a{color:inherit;text-decoration:none}
.studio-add{width:100%}
@media(prefers-reduced-motion:reduce){.studio-card{transition:none}.studio-card:hover{transform:none}}
@media(max-width:900px){
  .studio-topbar{top:auto;bottom:0;position:sticky;border-radius:14px 14px 0 0;box-shadow:0 -4px 16px rgba(0,0,0,.08)}
  .studio-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important}
  .studio-thumb img{height:140px}
}
/* --- landing + 3-step wizard --- */
.land-hero{position:relative;border-radius:22px;overflow:hidden;background:linear-gradient(135deg,#0aa9b5,#6610f2);color:#fff;margin:12px 0}
.land-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
.land-hero-in{position:relative;padding:56px 32px;max-width:720px}
.land-pill{display:inline-block;background:rgba(255,255,255,.2);border-radius:999px;padding:6px 16px;font-weight:600}
.land-hero h1{font-size:2.4rem;margin:12px 0;color:#fff}
.land-hero .lede{font-size:1.1rem;opacity:.95}
.land-cta{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.btn-lg{padding:12px 24px;font-size:1.05rem}
.land-stats{display:flex;gap:18px;flex-wrap:wrap;opacity:.95}
.land-stats b{font-size:1.3rem}
.land-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:18px 0}
.land-step{display:flex;gap:12px;background:#fff;border:1px solid #e3eef4;border-radius:14px;padding:14px}
.land-step span{font-size:1.6rem}
.marquee{overflow:hidden;border-radius:14px}
.marquee-in{display:flex;gap:10px;width:max-content;animation:mq 40s linear infinite}
.marquee-in img{height:150px;border-radius:10px}
.marquee:hover .marquee-in{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.land-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.land-tabs [role=tab]{padding:8px 14px;border-radius:999px;border:1px solid #dbe7ef;background:#fff;cursor:pointer}
.land-tabs [role=tab].on{background:#0aa9b5;color:#fff;border-color:#0aa9b5}
.land-case{background:#f2fbfc;border-radius:14px;padding:16px;margin:8px 0}
.land-story{font-size:1.05rem}
.land-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.land-faq details{border:1px solid #e3eef4;border-radius:10px;padding:10px 14px;margin:8px 0;background:#fff}
.land-faq summary{cursor:pointer;font-weight:600}
.bstep-nav{display:flex;gap:8px;list-style:none;padding:0;margin:14px 0;flex-wrap:wrap}
.bstep-nav button{border:1px solid #dbe7ef;background:#fff;border-radius:999px;padding:8px 16px;cursor:pointer}
.bstep-nav button.on{background:#0aa9b5;border-color:#0aa9b5;color:#fff}
.bstep-nav b{display:inline-block;background:rgba(0,0,0,.08);border-radius:50%;width:22px;height:22px;line-height:22px;text-align:center;margin-right:6px}
.bstep-nav button.on b{background:rgba(255,255,255,.3)}
.bstep-panel{background:#fff;border:1px solid #e3eef4;border-radius:14px;padding:16px;margin:10px 0}
@media(prefers-reduced-motion:reduce){.marquee-in{animation:none}}
@media(max-width:700px){.land-hero-in{padding:36px 20px}.land-hero h1{font-size:1.7rem}.marquee-in img{height:110px}}
/* --- stepper + vector icons --- */
.studio-tabs [role=tab] svg, .bstep-nav button svg, .land-tabs [role=tab] svg,
.btn svg, summary svg, .land-pill svg{width:1.1em;height:1.1em;vertical-align:-0.2em}
.bstep-nav{display:flex;gap:0;list-style:none;padding:0;margin:16px 0;align-items:center}
.bstep-nav li{flex:1;display:flex}
.bstep-nav li+li{margin-left:-1px}
.bstep-nav button{flex:1;display:flex;gap:8px;align-items:center;justify-content:center;border:1px solid #dbe7ef;background:#fff;padding:10px 8px;cursor:pointer;color:#5a7180;position:relative}
.bstep-nav li:first-child button{border-radius:12px 0 0 12px}
.bstep-nav li:last-child button{border-radius:0 12px 12px 0}
.bstep-nav button b{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#eef4f7;color:#5a7180;font-size:.85rem;flex:none}
.bstep-nav button.on{background:#0aa9b5;border-color:#0aa9b5;color:#fff;font-weight:700}
.bstep-nav button.on b{background:rgba(255,255,255,.3);color:#fff}
.bstep-nav button.done{color:#0a7d86}
.bstep-nav button.done b{background:#0aa9b5;color:#fff}
.bstep-pager{display:flex;justify-content:space-between;gap:10px;margin:14px 0;flex-wrap:wrap}
@media(max-width:700px){
  .bstep-nav button span{display:none}
  .bstep-nav button{padding:10px 4px}
  .bstep-pager .btn{flex:1;text-align:center}
}
/* --- floating move-to-download bar (step 2) --- */
.studio-floatbar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:40;display:flex;gap:14px;align-items:center;background:#0b3b3e;color:#fff;border-radius:999px;padding:10px 12px 10px 20px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.studio-floatbar[hidden]{display:none}
.studio-float-count{white-space:nowrap}
.studio-float-count strong{font-size:1.05rem}
@media(max-width:900px){.studio-floatbar{bottom:84px;max-width:94vw}}
@media(prefers-reduced-motion:reduce){.studio-floatbar{transform:translateX(-50%)}}
/* --- step beauty: rhythm, insight, gallery, motion --- */
.bstep-panel{background:#fff;border:1px solid #e3eef4;border-radius:18px;padding:22px;margin:14px 0}
.bstep-panel>h2{margin:0 0 4px;font-size:1.35rem}
.bstep-panel .meta{line-height:1.55}
.bstep-enter{animation:bstepIn .28s ease}
@keyframes bstepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.insight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:12px 0}
.insight-card{background:linear-gradient(135deg,#f2fbfc,#eef4ff);border:1px solid #d5ecef;border-radius:14px;padding:12px;text-align:center}
.insight-card b{display:block;font-size:1.5rem;color:#0a7d86}
.insight-card span{font-size:.82rem;color:#5a7180}
.insight-gal{margin:6px 0 12px}
.insight-gal img{height:110px;border-radius:10px;width:100%;object-fit:cover}
[data-pack-list]:empty::after{content:"Nothing here yet — add pages from the grid, or use a template. Your picks will line up here.";display:block;color:#7b8f99;background:#f6fafb;border:1px dashed #cfdfe7;border-radius:10px;padding:14px}
.btn:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #0aa9b5;outline-offset:2px}
.studio-topbar{box-shadow:0 4px 14px rgba(10,169,181,.10)}
@media(prefers-reduced-motion:reduce){.bstep-enter{animation:none}}
@media(max-width:700px){.bstep-panel{padding:16px 14px;border-radius:14px}.insight-card b{font-size:1.25rem}}
/* --- cross-theme fixes --- */
.studio-search input[type=search], .studio-smart input[type=search]{width:auto}
.studio-search select{width:auto;flex:none}
.studio-topbar{position:static}
@media(max-width:900px){
  .studio-topbar{position:sticky}
  .studio-search input[type=search]{width:100%;flex:1 1 100%}
  .studio-search select{flex:1}
  .studio-smart input[type=search]{width:100%;flex:1 1 100%}
}
@media(max-width:700px){
  .studio-pack-grid{grid-template-columns:1fr}
  .studio-topbar{flex-direction:column;align-items:stretch}
  .studio-topbar-btns{margin-left:0}
  .bstep-nav{margin:10px 0}
}
/* --- audit fixes: unstyled sections + sticky offset under site header --- */
.studio-pack{top:96px}
.land-marquee,.land-tpls,.land-cases{margin:22px 0}
.land-marquee h2,.land-tpls h2,.land-cases h2,.land-fomo h2,.land-faq h2{margin:0 0 10px;font-size:1.4rem}
.land-fomo{background:linear-gradient(135deg,#fff8ec,#fdf1f6);border:1px solid #f3e2c7;border-radius:18px;padding:22px;margin:22px 0}
.land-faq{margin:22px 0}
/* fav hearts: red active */
[data-fav][aria-pressed="true"]{color:#ff4162 !important;border-color:#ff4162 !important}
.studio-heart{color:#b7c6cf}
/* fav hearts: grey idle, filled red active */
[data-fav]{color:#8a9ba5}
[data-fav][aria-pressed="true"]{color:#ff4162 !important;border-color:#ff4162 !important}
[data-fav][aria-pressed="true"] svg path{fill:#ff4162}
.studio-heart{color:#8a9ba5}