/* Cover Templates launch sales page — scoped to .cover-templates-page */
html:has(.cover-templates-page) {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
  overflow-x: hidden;
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html:has(.cover-templates-page) {
    scroll-behavior: auto;
  }
}

.cover-templates-page {
  box-sizing: border-box;
  background: #fff;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  --primary:#6047f5;
  --primary-dark:#4b32df;
  --violet:#8f4cf6;
  --blue:#3f73ff;
  --pink:#ef5bbb;
  --orange:#ff825d;
  --teal:#25bfc9;
  --ink:#171521;
  --muted:#686676;
  --line:#e8e6ef;
  --soft:#f8f7fd;
  --dark:#100d20;
  --white:#fff;
  *{
  box-sizing:border-box
  }
  :scope{
  scroll-behavior:smooth;
  scroll-padding-top:92px
  }
  :scope{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.6
  }
  a{
  color:inherit;
  text-decoration:none
  }
  button,input,select{
  font:inherit
  }
  button,a,summary{
  -webkit-tap-highlight-color:transparent
  }
  button{
  cursor:pointer
  }
  img{
  max-width:100%
  }
  .wrap{
  width:min(1180px,calc(100% - 48px));
  margin-inline:auto
  }
  .draft{
  background:#f3f1ff;
  color:#615c78;
  text-align:center;
  font-size:12px;
  padding:7px 18px;
  letter-spacing:.7px;
  font-weight:800
  }
  .draft span{
  font-weight:500;
  letter-spacing:0;
  margin-left:14px;
  color:#7c788a
  }
  .pageHeader{
  max-width:1280px;
  margin:auto;
  padding:18px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  border-bottom:1px solid #f0eef5;
  background:#ffffffed;
  backdrop-filter:blur(16px);
  position:sticky;
  top:0;
  z-index:30
  }
  .brand{
  display:flex;
  align-items:center;
  gap:10px
  }
  .brand-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:8px;
  background:linear-gradient(135deg,#5748f7,#a346ed);
  color:#fff;
  font-size:22px;
  font-weight:900;
  box-shadow:0 6px 16px #6948f52f
  }
  .spt-wordmark{
  display:flex;
  flex-direction:column;
  line-height:1
  }
  .spt-wordmark>span{
  font-size:8px;
  font-weight:800;
  letter-spacing:1.65px;
  color:#5e5a68
  }
  .spt-wordmark>strong{
  font-size:22px;
  letter-spacing:.2px;
  margin-top:3px;
  color:#171521
  }
  .wordmark-dot{
  color:var(--primary)
  }
  .pageNav{
  display:flex;
  align-items:center;
  gap:25px;
  color:#54515e;
  font-size:14px;
  font-weight:600
  }
  .pageNav a:hover{
  color:var(--primary)
  }
  .button{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:22px;
  padding:16px 22px;
  border:0;
  border-radius:9px;
  background:linear-gradient(135deg,#654df7,#553ce7);
  color:#fff;
  font-size:16px;
  font-weight:800;
  line-height:1.25;
  box-shadow:0 9px 24px #6047f52d;
  transition:transform .18s,box-shadow .18s
  }
  .button:hover{
  transform:translateY(-2px);
  box-shadow:0 13px 28px #6047f53b
  }
  .button span{
  font-size:20px;
  line-height:1
  }
  .button.small{
  padding:12px 17px;
  font-size:13px;
  gap:12px
  }
  .secondary-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 18px;
  color:var(--primary);
  font-size:15px;
  font-weight:800
  }
  .mini-play{
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  border-radius:50%;
  background:#ede9ff;
  font-size:10px;
  padding-left:2px
  }
  .eyebrow{
  margin:0 0 17px;
  color:var(--primary);
  font-size:12px;
  line-height:1.4;
  letter-spacing:1.6px;
  font-weight:900
  }
  .gradient-text{
  background:linear-gradient(90deg,#3f73ff 0%,#6d47f4 35%,#ef5bbb 72%,#ff8a5d 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
  }
  .hero{
  padding-top:62px;
  padding-bottom:38px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative
  }
  .hero:before{
  content:"";
  position:absolute;
  z-index:-1;
  width:720px;
  height:520px;
  top:-100px;
  left:50%;
  transform:translateX(-50%);
  background:radial-gradient(circle,#7454ff13 0%,#ff6dbc09 37%,transparent 70%)
  }
  .hero-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:850px
  }
  .hero .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 13px;
  border:1px solid #ddd5ff;
  border-radius:40px;
  background:#faf9ff;
  font-size:11px;
  letter-spacing:1.15px
  }
  .hero h1{
  font-size:clamp(48px,6vw,76px);
  line-height:1.01;
  letter-spacing:-4.6px;
  margin:0 0 22px;
  font-weight:850
  }
  .hero h1 span{
  background:linear-gradient(90deg,#3d74ff,#7250f2 42%,#ef5bbb 72%,#ff8c5c);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
  }
  .hero .lede{
  max-width:690px;
  margin:0 auto 24px;
  color:#625f6e;
  font-size:18px;
  line-height:1.65
  }
  .hero .lede strong{
  color:#24212c
  }
  .hero-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:26px
  }
  .hero-flow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0 0 13px
  }
  .hero-flow i{
  font-style:normal;
  color:#b8b4c5
  }
  .flow-step{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 11px 7px 7px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:99px;
  box-shadow:0 5px 15px #21172f09;
  font-size:13px;
  font-weight:800
  }
  .flow-step b{
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  color:#fff;
  border-radius:50%;
  font-size:12px
  }
  .flow-step.blue b{
  background:var(--blue)
  }
  .flow-step.purple b{
  background:var(--violet)
  }
  .flow-step.pink b{
  background:var(--pink)
  }
  .flow-step.orange b{
  background:var(--orange)
  }
  .micro{
  font-size:13px;
  line-height:1.55;
  color:#777382;
  margin:10px 0
  }
  .hero-visual{
  order:2;
  width:min(900px,100%);
  margin-top:24px;
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  position:relative;
  box-shadow:0 28px 70px #3e2b6418
  }
  .hero-visual:before{
  content:"";
  display:block;
  height:3px;
  background:linear-gradient(90deg,var(--blue),var(--violet),var(--pink),var(--orange),var(--teal))
  }
  .hero-visual img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1.9;
  object-fit:cover;
  object-position:center 50%
  }
  .visual-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:19px 28px;
  background:#fff;
  text-align:left;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line)
  }
  .visual-label b{
  font-size:21px;
  line-height:1.2
  }
  .visual-label>span{
  color:var(--primary);
  font-size:41px;
  line-height:.84;
  font-weight:900;
  text-align:right
  }
  .visual-label small{
  font-size:10px;
  letter-spacing:1.4px
  }
  .art-note{
  margin:0;
  padding:0 28px 15px;
  background:#fff;
  color:#898593;
  font-size:12px;
  text-align:left;
  border:1px solid var(--line);
  border-top:0;
  border-radius:0 0 20px 20px
  }
  .video-section{
  padding:68px 0 70px
  }
  .video-intro{
  text-align:center;
  max-width:760px;
  margin:0 auto
  }
  .video-intro h2{
  font-size:clamp(39px,5vw,58px);
  line-height:1.05;
  letter-spacing:-2.7px;
  margin:0 0 18px
  }
  .video-intro .lede{
  max-width:650px;
  margin:0 auto 31px;
  color:var(--muted);
  font-size:18px
  }
  .video-placeholder{
  position:relative;
  width:min(950px,100%);
  aspect-ratio:16/9;
  min-height:400px;
  margin:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(135deg,#0d0b1d 0%,#17102c 50%,#0a1729 100%);
  color:#fff;
  padding:45px;
  box-shadow:0 28px 70px #20123b20
  }
  .video-placeholder:before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 50%,#734cff40 0%,transparent 32%),radial-gradient(circle at 20% 20%,#307aff1c,transparent 30%),radial-gradient(circle at 80% 80%,#ed5bbc1c,transparent 30%)
  }
  .video-placeholder>*{
  position:relative
  }
  .video-badge{
  font-size:11px;
  letter-spacing:1.7px;
  color:#beb0ff;
  font-weight:900
  }
  .play-circle{
  display:grid;
  place-items:center;
  width:76px;
  height:76px;
  margin:25px 0 5px;
  border-radius:50%;
  background:linear-gradient(135deg,#6b4cf6,#9b4bec);
  color:#fff;
  font-size:23px;
  padding-left:5px;
  box-shadow:0 0 0 12px #ffffff0a,0 12px 35px #6e4cff55
  }
  .video-placeholder h3{
  font-size:clamp(29px,4vw,44px);
  line-height:1.12;
  letter-spacing:-1.7px;
  margin:25px 0 18px
  }
  .video-status{
  padding:10px 17px;
  border:1px solid #ffffff2c;
  background:#ffffff10;
  border-radius:99px;
  color:#fff;
  font-size:14px;
  font-weight:800
  }
  .video-placeholder p{
  margin:15px 0 0;
  color:#aaa3bd;
  font-size:13px
  }
  .video-topics{
  display:flex;
  justify-content:center;
  gap:44px;
  width:min(850px,100%);
  margin:18px auto 0;
  padding:17px 22px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:0 8px 25px #2c1d4d0a;
  color:#555160;
  font-size:14px;
  font-weight:800
  }
  .stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:0;
  margin-bottom:80px;
  padding:20px;
  border-radius:18px;
  background:linear-gradient(120deg,#f6f4ff,#fff6fb 58%,#f2fcff);
  border:1px solid #ece9f6;
  box-shadow:0 15px 50px #4e33720b
  }
  .stats>div{
  padding:11px 14px;
  text-align:center
  }
  .stats b{
  display:block;
  color:var(--primary);
  font-size:34px;
  line-height:1.1;
  letter-spacing:-1px
  }
  .stats span{
  display:block;
  margin-top:6px;
  color:#6c6877;
  font-size:14px;
  line-height:1.35
  }
  .problem{
  padding-bottom:95px;
  text-align:center
  }
  .problem h2,.section-top h2,.complete-story h2,.how h2,.truth h2,.bundle-heading h2,.faq h2{
  font-size:clamp(38px,4.6vw,54px);
  line-height:1.08;
  letter-spacing:-2.5px;
  margin:0 0 22px
  }
  .problem h2 span{
  color:#85808e
  }
  .three{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:42px;
  text-align:left
  }
  .three article{
  position:relative;
  min-height:235px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  box-shadow:0 12px 32px #291d4009;
  overflow:hidden
  }
  .three article:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px
  }
  .three article:nth-child(1):before{
  background:var(--blue)
  }
  .three article:nth-child(2):before{
  background:var(--pink)
  }
  .three article:nth-child(3):before{
  background:var(--orange)
  }
  .num{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:10px;
  background:#f1eeff;
  color:var(--primary);
  font-size:13px;
  font-weight:900
  }
  .three h3{
  font-size:23px;
  line-height:1.25;
  margin:22px 0 10px
  }
  .three p{
  margin:0;
  color:var(--muted);
  font-size:16px
  }
  .takeaway{
  width:min(720px,100%);
  margin:34px auto 0;
  padding:23px 26px;
  border-radius:13px;
  background:linear-gradient(110deg,#f0edff,#fff3fa);
  font-size:22px;
  line-height:1.4
  }
  .collection{
  padding:96px 0;
  background:linear-gradient(180deg,#f8f7ff 0%,#fcfbff 100%)
  }
  .section-top{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:50px;
  margin-bottom:34px
  }
  .section-top>div{
  max-width:720px
  }
  .section-top>p{
  max-width:350px;
  color:var(--muted);
  font-size:17px
  }
  .category-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px
  }
  .category-grid article{
  position:relative;
  padding:27px;
  border:1px solid #e5e2ef;
  border-radius:15px;
  background:#fff;
  box-shadow:0 10px 25px #30214708;
  overflow:hidden
  }
  .category-grid article:after{
  content:"";
  position:absolute;
  width:90px;
  height:90px;
  right:-30px;
  bottom:-40px;
  border-radius:50%;
  background:#6d51ef0b
  }
  .category-grid article:nth-child(2):after{
  background:#ef5bbb10
  }
  .category-grid article:nth-child(3):after{
  background:#35bfc910
  }
  .category-grid article:nth-child(4):after{
  background:#ff825d12
  }
  .category-grid article:nth-child(5):after{
  background:#3f73ff10
  }
  .category-grid b{
  font-size:38px;
  line-height:1;
  color:var(--primary);
  letter-spacing:-1.5px
  }
  .category-grid h3{
  font-size:21px;
  line-height:1.25;
  margin:14px 0 6px
  }
  .category-grid p{
  margin:0;
  color:var(--muted);
  font-size:15px
  }
  .catalog{
  margin-top:24px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 25px #2f1f4508;
  overflow:hidden
  }
  summary{
  display:flex;
  justify-content:space-between;
  gap:20px;
  list-style:none;
  cursor:pointer;
  padding:22px 25px;
  font-size:17px;
  font-weight:800
  }
  summary::-webkit-details-marker{
  display:none
  }
  summary span{
  color:var(--primary);
  font-size:20px;
  transition:transform .2s
  }
  details[open]>summary span{
  transform:rotate(45deg)
  }
  .catalog-content{
  padding:0 25px 25px
  }
  .filters{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
  }
  label{
  display:grid;
  gap:8px;
  font-size:14px;
  font-weight:800
  }
  input,select{
  width:100%;
  padding:13px 14px;
  border:1px solid #d7d3e2;
  border-radius:9px;
  background:#fff;
  color:var(--ink)
  }
  input:focus,select:focus{
  outline:3px solid #6047f522;
  border-color:var(--primary)
  }
  #count{
  margin:18px 0 8px;
  color:var(--muted);
  font-size:14px
  }
  #results{
  max-height:460px;
  overflow:auto
  }
  .result{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:13px 0;
  border-bottom:1px solid var(--line);
  font-size:15px
  }
  .result span{
  color:var(--muted);
  font-size:13px;
  text-align:right
  }
  .center{
  text-align:center;
  margin-top:31px
  }
  .complete-story{
  padding-top:100px;
  padding-bottom:100px
  }
  .complete-story>div:first-child,.complete-story>div:nth-child(2){
  display:inline-block;
  width:calc(50% - 25px);
  vertical-align:top
  }
  .complete-story>div:nth-child(2){
  margin-left:45px
  }
  .complete-story .lede{
  margin-top:0;
  color:var(--muted);
  font-size:18px
  }
  .complete-story>div>p:not(.lede){
  color:var(--muted)
  }
  .cover-parts{
  display:grid;
  grid-template-columns:1.15fr .7fr 1.15fr;
  margin-top:35px;
  border-radius:17px;
  overflow:hidden;
  background:linear-gradient(90deg,#edf1ff,#eee8ff,#fff0f7);
  border:1px solid #e1ddeb;
  box-shadow:0 18px 45px #2b19400e
  }
  .cover-parts article{
  padding:31px
  }
  .cover-parts article:nth-child(2){
  background:linear-gradient(180deg,#654cf5,#5535d8);
  color:#fff
  }
  .cover-parts span{
  font-size:11px;
  letter-spacing:1.3px;
  font-weight:900
  }
  .cover-parts h3{
  font-size:21px;
  line-height:1.25;
  margin:16px 0 9px
  }
  .cover-parts p{
  margin:0;
  font-size:15px;
  color:inherit
  }
  .editor-section{
  position:relative;
  padding:100px 0;
  background:linear-gradient(140deg,#0c0a19,#17102c 58%,#08172b);
  color:#fff;
  overflow:hidden
  }
  .editor-section:before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 78% 28%,#6746ff2a,transparent 30%),radial-gradient(circle at 8% 80%,#e857b617,transparent 26%)
  }
  .editor-section>.wrap{
  position:relative
  }
  .editor-section .section-top>p{
  color:#bcb5c9
  }
  .editor-section .eyebrow{
  color:#a895ff
  }
  .editor-shot{
  margin:0 auto;
  max-width:1024px;
  line-height:0
  }
  .editor-shot img{
  display:block;
  width:100%;
  height:auto;
  border-radius:17px;
  box-shadow:0 25px 75px #0005
  }
  .editor-workspace{
  display:grid;
  grid-template-columns:250px 1fr;
  background:#ececf2
  }
  .editor-controls{
  padding:24px;
  background:#fff;
  border-right:1px solid var(--line)
  }
  .editor-controls .eyebrow{
  color:var(--primary)
  }
  .editor-controls label{
  margin-bottom:20px
  }
  .editor-controls input[type=color]{
  height:43px;
  padding:3px
  }
  .editor-controls>button{
  width:100%;
  padding:11px;
  border:1px solid #d7d1e3;
  border-radius:9px;
  background:#f7f5ff;
  color:var(--primary);
  font-size:14px;
  font-weight:800
  }
  .editor-controls>p:last-child{
  margin-top:18px;
  color:var(--muted);
  font-size:13px
  }
  .canvas-area{
  min-width:0;
  padding:32px 45px 17px
  }
  .sample-canvas{
  position:relative;
  max-width:700px;
  margin:auto;
  overflow:hidden;
  background:#211535;
  aspect-ratio:1.7;
  box-shadow:0 10px 25px #25163729
  }
  .sample-canvas>img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.57;
  pointer-events:none
  }
  .editable-title{
  position:absolute;
  left:10%;
  top:42%;
  width:80%;
  padding:12px 16px;
  border:2px solid #b996ff;
  background:#241139a3;
  color:#fff;
  font-size:clamp(20px,3vw,38px);
  font-weight:900;
  line-height:1.1;
  text-align:center;
  cursor:grab;
  touch-action:none;
  user-select:none;
  overflow-wrap:anywhere
  }
  .editable-title:active{
  cursor:grabbing
  }
  .canvas-area>p{
  margin:14px 0 0;
  color:#6f6b78;
  font-size:13px;
  text-align:center
  }
  .editor-caption{
  padding:12px 20px;
  background:#fff;
  color:#7c7885;
  font-size:12px
  }
  .editor-benefits{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:22px
  }
  .editor-benefits article{
  padding:23px;
  border:1px solid #ffffff1d;
  border-radius:13px;
  background:#ffffff09
  }
  .editor-benefits h3{
  margin:0 0 6px;
  font-size:20px
  }
  .editor-benefits p{
  margin:0;
  color:#bdb7ca;
  font-size:15px
  }
  .editor-section .center .button{
  background:#fff;
  color:var(--primary);
  box-shadow:none
  }
  .how{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:75px;
  padding-top:100px;
  padding-bottom:90px
  }
  .how .lede{
  color:var(--muted);
  font-size:18px
  }
  .how ol{
  margin:0;
  padding:0;
  list-style:none
  }
  .how li{
  display:flex;
  gap:19px;
  margin-bottom:22px;
  padding:19px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff
  }
  .how li>span{
  display:grid;
  place-items:center;
  min-width:42px;
  height:42px;
  border-radius:12px;
  background:linear-gradient(135deg,#6951f6,#8e4cee);
  color:#fff;
  font-weight:900
  }
  .how h3{
  margin:3px 0 5px;
  font-size:20px
  }
  .how li p{
  margin:0;
  color:var(--muted);
  font-size:15px
  }
  .truth{
  padding:82px 0;
  background:linear-gradient(110deg,#f2efff,#fff4fb 58%,#eefaff);
  text-align:center
  }
  .truth h2{
  max-width:850px;
  margin:0 auto 19px
  }
  .truth-inner>p:not(.eyebrow){
  max-width:720px;
  margin:0 auto;
  color:var(--muted);
  font-size:18px
  }
  .truth-tags{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:27px
  }
  .truth-tags span{
  padding:8px 13px;
  border:1px solid #ded8ea;
  border-radius:99px;
  background:#ffffffb8;
  color:#5f596a;
  font-size:13px;
  font-weight:700
  }
  .bundles-section{
  padding-top:105px;
  padding-bottom:85px
  }
  .bundle-heading{
  text-align:center;
  max-width:880px;
  margin:0 auto 43px
  }
  .bundle-heading .lede{
  max-width:620px;
  margin:auto;
  color:var(--muted)
  }
  .bundle-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:17px;
  align-items:stretch
  }
  .bundle-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #dedbe7;
  border-radius:16px;
  background:#fff;
  box-shadow:0 14px 38px #2b1d420b
  }
  .bundle-tag{
  min-height:49px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  text-align:center;
  background:linear-gradient(90deg,#7254f5,#6047f5);
  color:#fff;
  font-size:11px;
  line-height:1.25;
  letter-spacing:.7px;
  font-weight:900
  }
  .bundle-tag.neutral{
  background:#f2f1f6;
  color:#625d6b
  }
  .creator .bundle-tag{
  background:linear-gradient(90deg,#6449f4,#d456d1,#ff7e6a)
  }
  .bundle-card.ultimate{
  margin-top:17px;
  border:2px solid #171326;
  box-shadow:0 18px 50px #100d2014
  }
  .ultimate .bundle-tag{
  background:linear-gradient(90deg,#100d20,#4b32df,#ef5bbb)
  }
  .recommended{
  border:2px solid var(--primary);
  transform:translateY(-7px);
  box-shadow:0 18px 50px #6047f51c
  }
  .bundle-body{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:27px 22px
  }
  .bundle-body.ultimate-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px 40px;
  align-items:start
  }
  .ultimate-body .bundle-promise{
  min-height:0
  }
  .ultimate-body .checklist{
  margin-top:6px
  }
  .bundle-body h3{
  margin:0 0 8px;
  font-size:27px;
  line-height:1.25
  }
  .bundle-promise{
  min-height:49px;
  margin:0;
  color:var(--muted);
  font-size:15px
  }
  .bundle-price{
  margin-top:18px;
  font-size:57px;
  line-height:1;
  font-weight:900;
  letter-spacing:-2.5px
  }
  .regular{
  min-height:41px;
  margin:9px 0 22px;
  color:#77727f;
  font-size:13px
  }
  .bundle-body .button{
  padding:15px 10px;
  gap:9px;
  font-size:14px
  }
  .full{
  width:100%
  }
  .tier-summary{
  margin:17px 0 10px;
  color:var(--primary);
  font-size:13px;
  font-weight:900;
  text-align:center
  }
  .checklist,.exclusions{
  margin:0;
  padding:0;
  list-style:none;
  font-size:15px
  }
  .checklist li,.exclusions li{
  position:relative;
  padding:7px 0 7px 26px
  }
  .checklist li:before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--primary);
  font-weight:900
  }
  .checklist .item-value{
  color:#8b8793;
  font-style:normal;
  font-weight:700
  }
  .bundle-card.ultimate .checklist .item-value{
  color:#6d6876
  }
  .coming-soon-inline{
  color:var(--primary);
  font-style:normal;
  font-weight:700
  }
  .exclusions{
  margin-bottom:22px;
  color:var(--muted);
  font-size:14px
  }
  .exclusions li:before{
  content:"—";
  position:absolute;
  left:0;
  color:#a19ca8
  }
  .bonus{
  margin-top:auto;
  padding:17px 15px;
  border:1px solid #dfd9f0;
  border-radius:11px;
  background:#f5f2ff
  }
  .bonus>span{
  display:block;
  margin-bottom:6px;
  color:var(--primary);
  font-size:10px;
  letter-spacing:1px;
  font-weight:900
  }
  .bonus strong{
  display:block;
  font-size:15px;
  line-height:1.35
  }
  .bonus p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px
  }
  .muted-bonus{
  border-color:var(--line);
  background:#f8f8fa
  }
  .offer-footnote{
  max-width:970px;
  margin:21px auto;
  color:#7e7986;
  font-size:12px;
  line-height:1.65
  }
  .upgrade-note{
  margin:34px 0;
  padding:24px 27px;
  border:1px solid #e3ddef;
  border-left:4px solid var(--primary);
  border-radius:0 13px 13px 0;
  background:linear-gradient(90deg,#f2efff,#fff)
  }
  .upgrade-note>strong{
  font-size:20px
  }
  .upgrade-note p{
  margin:7px 0 10px;
  color:#5d5865;
  font-size:16px
  }
  .text-link{
  color:var(--primary);
  font-size:14px;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:5px
  }
  .comparison{
  margin:54px 0
  }
  .comparison>h3{
  margin-bottom:21px;
  font-size:28px
  }
  .table-scroll{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:14px
  }
  .comparison table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  text-align:center
  }
  .comparison th,.comparison td{
  padding:16px 14px;
  border-bottom:1px solid var(--line)
  }
  .comparison thead th{
  background:#171326;
  color:#fff
  }
  .comparison thead th:nth-child(3){
  background:var(--primary)
  }
  .comparison thead th:nth-child(5){
  background:#100d20
  }
  .comparison tbody td:nth-child(5){
  font-weight:800
  }
  .comparison thead b{
  font-size:19px
  }
  .comparison tbody th{
  width:36%;
  font-weight:600;
  text-align:left
  }
  .comparison tbody tr:nth-child(even){
  background:#faf9fc
  }
  .comparison tbody td:nth-child(3){
  background:#6047f507;
  color:var(--primary);
  font-weight:800
  }
  .standalone{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  padding:29px;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(110deg,#faf9ff,#fff7fb)
  }
  .standalone .eyebrow{
  margin-bottom:8px
  }
  .standalone h3{
  margin:0 0 6px;
  font-size:24px
  }
  .standalone h3 .coming-soon-pill{
  display:inline-block;
  margin-left:10px;
  padding:4px 9px;
  border:1px solid #dfd9f0;
  border-radius:999px;
  background:#f5f2ff;
  color:var(--primary);
  font-size:11px;
  font-style:normal;
  font-weight:800;
  letter-spacing:.4px;
  vertical-align:middle
  }
  .standalone p{
  max-width:620px;
  margin:0;
  color:var(--muted);
  font-size:15px
  }
  .standalone .button{
  flex-shrink:0;
  font-size:14px
  }
  .faq{
  max-width:950px;
  padding-top:45px;
  padding-bottom:100px
  }
  .faq>h2{
  max-width:650px
  }
  .faq details{
  border-bottom:1px solid var(--line)
  }
  .faq summary{
  padding:20px 0;
  font-size:17px
  }
  .faq details>p{
  max-width:790px;
  padding-bottom:13px;
  color:var(--muted);
  font-size:16px
  }
  .final-cta{
  padding:86px 24px;
  background:linear-gradient(135deg,#16102a,#29134a 50%,#111d38);
  color:#fff;
  text-align:center
  }
  .final-cta .eyebrow{
  color:#b6a6ff
  }
  .final-cta h2{
  margin:0 0 27px;
  font-size:clamp(44px,5.7vw,66px);
  line-height:1.03;
  letter-spacing:-3px
  }
  .button.light{
  background:#fff;
  color:var(--primary);
  box-shadow:0 10px 25px #0002
  }
  .final-cta>p:last-child{
  margin:22px 0 0;
  color:#c7c0d5;
  font-size:14px
  }
  .pageFooter{
  padding-top:29px!important;
  padding-bottom:29px!important;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px
  }
  .pageFooter p{
  margin:0;
  color:#77727f;
  font-size:12px
  }
  .upsell-dialog{
  width:min(500px,calc(100% - 36px));
  padding:38px;
  border:0;
  border-radius:16px;
  color:var(--ink);
  box-shadow:0 28px 85px #0005
  }
  .upsell-dialog::backdrop{
  background:#100a25b8;
  backdrop-filter:blur(4px)
  }
  .upsell-dialog h2{
  margin:0 0 15px;
  font-size:31px;
  line-height:1.15
  }
  .upsell-dialog p{
  color:var(--muted);
  font-size:16px
  }
  .close{
  position:absolute;
  top:8px;
  right:14px;
  border:0;
  background:none;
  color:var(--ink);
  font-size:29px
  }
  .centered{
  text-align:center
  }
  .terms{
  margin-top:19px;
  padding-top:16px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:12px
  }
  .terms p{
  margin:7px 0 0;
  font-size:12px
  }
  :focus-visible{
  outline:3px solid #6047f555;
  outline-offset:4px
  }
  @media(max-width:980px){
  .pageHeader .pageNav{
  display:none
  }
  .hero h1{
  letter-spacing:-3px
  }
  .video-topics{
  gap:22px
  }
  .stats{
  grid-template-columns:repeat(2,1fr)
  }
  .section-top{
  display:block
  }
  .section-top>p{
  max-width:650px
  }
  .bundle-grid{
  gap:10px
  }
  .bundle-body{
  padding:23px 16px
  }
  .bundle-body .button{
  font-size:12px
  }
  .bundle-tag{
  font-size:10px
  }
  .complete-story>div:first-child,.complete-story>div:nth-child(2){
  display:block;
  width:100%
  }
  .complete-story>div:nth-child(2){
  margin:20px 0 0
  }
  .how{
  gap:40px
  }
  .standalone{
  align-items:flex-start;
  flex-direction:column
  }

  }
  @media(max-width:760px){
  :scope{
  font-size:16px
  }
  .wrap{
  width:min(100% - 36px,1180px)
  }
  .draft{
  font-size:10px
  }
  .draft span{
  display:block;
  margin:2px 0 0;
  font-size:11px
  }
  .pageHeader{
  padding:15px 18px
  }
  .spt-wordmark>span{
  font-size:7px
  }
  .spt-wordmark>strong{
  font-size:19px
  }
  .brand-icon{
  width:30px;
  height:30px;
  font-size:19px
  }
  .button.small{
  padding:11px 12px;
  font-size:11px
  }
  .hero{
  padding-top:40px
  }
  .hero h1{
  font-size:48px;
  letter-spacing:-2.7px
  }
  .hero .lede{
  font-size:17px
  }
  .hero-actions{
  flex-direction:column;
  width:100%
  }
  .hero-actions .button,.hero-actions .secondary-button{
  width:100%;
  max-width:330px
  }
  .hero-flow{
  gap:5px;
  width:100%;
  overflow:hidden
  }
  .hero-flow i{
  display:none
  }
  .flow-step{
  gap:5px;
  padding-right:7px;
  font-size:11px
  }
  .flow-step b{
  width:23px;
  height:23px
  }
  .hero-visual{
  margin-top:18px
  }
  .hero-visual img{
  aspect-ratio:1.45
  }
  .visual-label{
  padding:16px 17px
  }
  .visual-label b{
  font-size:17px
  }
  .visual-label>span{
  font-size:31px
  }
  .art-note{
  padding:0 17px 13px
  }
  .video-section{
  padding:51px 0
  }
  .video-intro h2{
  font-size:39px;
  letter-spacing:-1.8px
  }
  .video-intro .lede{
  font-size:16px
  }
  .video-placeholder{
  min-height:355px;
  padding:27px 20px
  }
  .play-circle{
  width:64px;
  height:64px
  }
  .video-placeholder h3{
  font-size:31px
  }
  .video-topics{
  flex-direction:column;
  gap:8px;
  padding:17px;
  font-size:13px
  }
  .stats{
  margin-bottom:63px;
  padding:12px
  }
  .stats b{
  font-size:30px
  }
  .stats span{
  font-size:13px
  }
  .problem{
  padding-bottom:70px
  }
  .problem h2,.section-top h2,.complete-story h2,.how h2,.truth h2,.bundle-heading h2,.faq h2{
  font-size:36px;
  letter-spacing:-1.7px
  }
  .three{
  grid-template-columns:1fr;
  gap:12px
  }
  .three article{
  min-height:0
  }
  .takeaway{
  font-size:19px
  }
  .collection{
  padding:72px 0
  }
  .category-grid{
  grid-template-columns:1fr 1fr;
  gap:10px
  }
  .category-grid article{
  padding:19px
  }
  .category-grid b{
  font-size:31px
  }
  .category-grid h3{
  font-size:18px
  }
  .category-grid p{
  font-size:13px
  }
  .filters{
  grid-template-columns:1fr
  }
  .result{
  flex-direction:column;
  gap:2px
  }
  .result span{
  text-align:left
  }
  .complete-story{
  padding-top:75px;
  padding-bottom:75px
  }
  .cover-parts{
  grid-template-columns:1fr
  }
  .editor-section{
  padding:74px 0
  }
  .editor-workspace{
  grid-template-columns:1fr
  }
  .editor-controls{
  display:grid;
  grid-template-columns:1fr 90px;
  gap:10px 18px;
  border:0;
  border-bottom:1px solid var(--line)
  }
  .editor-controls .eyebrow{
  grid-column:1/-1;
  margin-bottom:0
  }
  .editor-controls label{
  margin:0
  }
  .editor-controls>button,.editor-controls>p:last-child{
  grid-column:1/-1
  }
  .editor-controls>p:last-child{
  margin:0
  }
  .canvas-area{
  padding:20px
  }
  .sample-canvas{
  aspect-ratio:1.4
  }
  .editable-title{
  font-size:clamp(18px,5vw,31px)
  }
  .editor-benefits{
  grid-template-columns:1fr
  }
  .how{
  grid-template-columns:1fr;
  gap:25px;
  padding-top:74px;
  padding-bottom:68px
  }
  .truth{
  padding:64px 0
  }
  .truth-tags{
  flex-direction:column;
  align-items:center;
  gap:8px
  }
  .bundles-section{
  padding-top:76px
  }
  .bundle-grid{
  grid-template-columns:1fr;
  gap:22px
  }
  .bundle-card.ultimate{
  margin-top:0
  }
  .ultimate-body{
  grid-template-columns:1fr;
  gap:8px
  }
  .bundle-body{
  padding:27px 22px
  }
  .bundle-body .button{
  font-size:15px
  }
  .recommended{
  transform:none
  }
  .bundle-tag{
  font-size:11px
  }
  .bundle-promise,.regular{
  min-height:0
  }
  .comparison th,.comparison td{
  min-width:105px;
  padding:13px 11px
  }
  .comparison tbody th{
  min-width:175px
  }
  .standalone{
  padding:23px
  }
  .faq{
  padding-top:25px;
  padding-bottom:76px
  }
  .final-cta{
  padding:72px 20px
  }
  .final-cta h2{
  font-size:47px;
  letter-spacing:-2px
  }
  .pageFooter{
  align-items:flex-start;
  flex-direction:column
  }

  }
  @media(prefers-reduced-motion:reduce){
  :scope{
  scroll-behavior:auto
  }
  *{
  transition:none!important
  }

  }

  /* Conversion and overview pass */
  .wrap{
  width:min(1320px,calc(100% - 56px))
  }
  .hero-copy{
  max-width:920px
  }
  .hero-visual{
  width:min(1040px,100%)
  }
  .video-section{
  padding-top:48px;
  padding-bottom:45px
  }
  .video-intro{
  max-width:850px
  }
  .video-placeholder{
  width:min(1100px,100%);
  min-height:390px
  }
  .video-topics{
  width:min(1000px,100%)
  }
  .stats{
  margin-bottom:45px;
  max-width:1220px
  }
  .bundles-section{
  padding-top:48px;
  padding-bottom:64px
  }
  .bundle-heading{
  margin-bottom:34px
  }
  .bundle-grid{
  gap:20px
  }
  .bundle-body{
  padding:30px 26px
  }
  .bundle-body h3{
  font-size:29px
  }
  .bundle-promise{
  font-size:16px
  }
  .bundle-body .button{
  font-size:15px
  }
  .bundle-body .checklist{
  font-size:16px
  }
  .comparison{
  margin:42px 0
  }
  .complete-story{
  padding-top:70px;
  padding-bottom:72px
  }
  .editor-section{
  padding:78px 0
  }
  .collection{
  padding:72px 0
  }
  .faq{
  padding-top:65px;
  padding-bottom:75px
  }
  .final-cta{
  padding-top:70px;
  padding-bottom:70px
  }

  @media(max-width:980px){
  .wrap{
  width:min(100% - 44px,1320px)
  }
  .bundle-body{
  padding:24px 18px
  }

  }

  @media(max-width:760px){
  .wrap{
  width:min(100% - 32px,1320px)
  }
  .video-section{
  padding-top:40px;
  padding-bottom:36px
  }
  .stats{
  margin-bottom:30px
  }
  .bundles-section{
  padding-top:36px;
  padding-bottom:54px
  }
  .bundle-body{
  padding:27px 22px
  }
  .complete-story{
  padding-top:58px;
  padding-bottom:60px
  }
  .editor-section{
  padding:62px 0
  }
  .collection{
  padding:58px 0
  }
  .faq{
  padding-top:52px;
  padding-bottom:60px
  }

  }

  /* Clear hero promise */
  .hero-copy{
  max-width:980px
  }
  .hero h1{
  font-size:clamp(47px,5.6vw,72px);
  max-width:980px
  }
  .hero .lede{
  max-width:810px;
  font-size:19px
  }
  .hero-benefits{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  flex-wrap:wrap;
  margin:0 0 10px
  }
  .hero-benefits span{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border:1px solid #e2def0;
  border-radius:99px;
  background:#fff;
  box-shadow:0 6px 18px #25183e09;
  color:#393542;
  font-size:14px;
  font-weight:800
  }
  .hero-benefits b{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#eeeaff;
  color:var(--primary);
  font-size:12px
  }
  .hero-benefits span:nth-child(2) b{
  background:#f9eafa;
  color:#d447aa
  }
  .hero-benefits span:nth-child(3) b{
  background:#eaf8f8;
  color:#159da8
  }
  .hero-note{
  margin-top:4px;
  font-size:14px
  }
  .hero-actions{
  margin-bottom:20px
  }

  @media(max-width:760px){
  .hero h1{
  font-size:43px;
  line-height:1.04
  }
  .hero .lede{
  font-size:17px
  }
  .hero-benefits{
  align-items:stretch;
  flex-direction:column;
  width:100%;
  max-width:330px
  }
  .hero-benefits span{
  justify-content:flex-start
  }
  .hero-note{
  max-width:340px
  }

  }

  /* Final hero message */
  .hero h1{
  max-width:1100px;
  font-size:clamp(45px,5.4vw,70px);
  line-height:1.03
  }
  .hero .lede{
  max-width:790px
  }

  @media(max-width:760px){
  .hero h1{
  font-size:41px;
  line-height:1.05
  }

  }

  /* Combined cover showcase + launch demo */
  .hero-visual{
  margin-top:30px
  }
  .hero-media{
  position:relative;
  overflow:hidden;
  background:#110c20
  }
  .hero-media img{
  display:block;
  width:100%;
  aspect-ratio:1.9;
  object-fit:cover;
  filter:brightness(.72)
  }
  .hero-media:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#100b2008,#100b2040)
  }
  .hero-media--video{
  position:relative;
  width:100%;
  height:0;
  padding-bottom:56.25%;
  background:#000;
  line-height:0
  }
  .hero-media--video:after{
  content:none
  }
  .hero-media--video iframe{
  position:absolute;
  top:0;
  left:0;
  width:100% !important;
  height:100% !important;
  max-width:none;
  border:0;
  display:block
  }
  .hero-video-overlay{
  position:absolute;
  z-index:2;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-align:center;
  padding:25px
  }
  .hero-video-overlay .play-circle{
  width:72px;
  height:72px;
  margin:0 0 15px;
  background:linear-gradient(135deg,#654df7,#a044ee);
  font-size:21px;
  box-shadow:0 0 0 11px #ffffff17,0 12px 30px #180d35a8
  }
  .hero-video-overlay strong{
  font-size:28px;
  line-height:1.2;
  letter-spacing:-.6px
  }
  .hero-video-overlay small{
  margin-top:5px;
  color:#ece8f5;
  font-size:15px
  }
  .hero-video-overlay em{
  margin-top:14px;
  padding:6px 11px;
  border:1px solid #ffffff42;
  border-radius:99px;
  background:#120d25a6;
  color:#ddd6e8;
  font-size:11px;
  font-style:normal;
  font-weight:800;
  letter-spacing:.5px
  }
  .hero .hero-visual{
  scroll-margin-top:100px
  }
  .stats{
  margin-top:24px
  }

  @media(max-width:760px){
  .hero-media img{
  aspect-ratio:1.35
  }
  .hero-media--video{
  aspect-ratio:16 / 9
  }
  .hero-video-overlay .play-circle{
  width:58px;
  height:58px
  }
  .hero-video-overlay strong{
  font-size:21px
  }
  .hero-video-overlay small{
  font-size:13px
  }
  .hero-video-overlay em{
  margin-top:9px
  }
  .visual-label b{
  font-size:16px
  }

  }

  /* Conversion optimization */
  .stats b{
  font-size:30px
  }
  .best-for{
  margin:0 0 8px;
  color:var(--primary);
  font-size:11px;
  line-height:1.35;
  letter-spacing:.8px;
  font-weight:900
  }
  .bundle-price{
  display:flex;
  align-items:baseline;
  gap:11px;
  margin-top:18px;
  line-height:1
  }
  .bundle-price span{
  color:#8b8793;
  font-size:19px;
  font-weight:700;
  letter-spacing:0;
  text-decoration:line-through
  }
  .bundle-price strong{
  font-size:57px;
  font-weight:900;
  letter-spacing:-2.5px
  }
  .regular{
  color:#5f5a68
  }
  .regular b{
  color:var(--primary)
  }
  .comparison-details{
  margin:38px 0;
  border:1px solid #ddd8e8;
  border-radius:14px;
  background:#fff;
  overflow:hidden
  }
  .comparison-details>summary{
  padding:20px 23px;
  color:var(--ink);
  font-size:17px
  }
  .comparison-details .comparison{
  margin:0;
  padding:0 18px 18px
  }
  .comparison-details[open]>summary{
  border-bottom:1px solid var(--line)
  }
  .mobile-buybar{
  display:none
  }

  @media(max-width:760px){
  :scope{
  padding-bottom:72px
  }
  .stats b{
  font-size:25px
  }
  .best-for{
  font-size:10px
  }
  .bundle-price strong{
  font-size:53px
  }
  .mobile-buybar{
  position:fixed;
  z-index:50;
  left:10px;
  right:10px;
  bottom:9px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px 10px 15px;
  border:1px solid #e0daef;
  border-radius:13px;
  background:#fffffff2;
  box-shadow:0 12px 35px #2117352b;
  backdrop-filter:blur(15px)
  }
  .mobile-buybar span{
  display:flex;
  flex-direction:column;
  line-height:1.25
  }
  .mobile-buybar b{
  font-size:13px
  }
  .mobile-buybar small{
  color:var(--muted);
  font-size:11px
  }
  .mobile-buybar a{
  padding:11px 14px;
  border-radius:8px;
  background:var(--primary);
  color:#fff;
  font-size:12px;
  font-weight:900
  }
  .comparison-details .comparison{
  padding:0 10px 10px
  }

  }


  /* Data-driven template thumbnail gallery */
  .template-showcase{
  margin-top:30px;
  padding:27px;
  border:1px solid #e3dfee;
  border-radius:18px;
  background:#fff;
  box-shadow:0 15px 40px #2d1e490b
  }
  .gallery-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:23px
  }
  .gallery-heading .eyebrow{
  margin-bottom:7px
  }
  .gallery-heading h3{
  margin:0 0 5px;
  font-size:30px;
  line-height:1.2;
  letter-spacing:-1px
  }
  .gallery-heading p{
  max-width:650px;
  margin:0;
  color:var(--muted);
  font-size:15px
  }
  .gallery-total{
  color:var(--primary);
  font-size:42px;
  line-height:.85;
  font-weight:900;
  text-align:right
  }
  .gallery-total small{
  display:block;
  margin-top:8px;
  font-size:10px;
  letter-spacing:1.5px
  }
  .gallery-toolbar{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:14px;
  margin-bottom:14px;
  padding:16px;
  border-radius:12px;
  background:#f8f7fc
  }
  .gallery-count{
  margin:14px 0;
  color:#686373;
  font-size:14px;
  font-weight:700
  }
  .thumbnail-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(135px,1fr));
  gap:14px
  }
  .template-thumb{
  min-width:0;
  overflow:hidden;
  border:1px solid #e5e2eb;
  border-radius:11px;
  background:#fff;
  box-shadow:0 6px 18px #271a3c08;
  transition:transform .18s,box-shadow .18s
  }
  .template-thumb:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 24px #271a3c14
  }
  .thumb-media{
  position:relative;
  overflow:hidden;
  aspect-ratio:2/3;
  background:linear-gradient(150deg,#eeebff,#d8d0ff)
  }
  .thumb-media.tone-1{
  background:linear-gradient(150deg,#e8f1ff,#cadcff)
  }
  .thumb-media.tone-2{
  background:linear-gradient(150deg,#fff0f8,#f7cfe5)
  }
  .thumb-media.tone-3{
  background:linear-gradient(150deg,#fff2e9,#ffd5c0)
  }
  .thumb-media.tone-4{
  background:linear-gradient(150deg,#e8fafa,#c8eeee)
  }
  .thumb-media.tone-5{
  background:linear-gradient(150deg,#f2eff6,#dcd5e6)
  }
  .thumb-media img,
  .thumb-media .thumb-media-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
  }
  .thumb-fallback{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:16px;
  color:#39304a;
  text-align:center
  }
  .thumb-fallback span{
  align-self:flex-start;
  font-size:9px;
  letter-spacing:1.3px;
  font-weight:900
  }
  .thumb-fallback b{
  margin:auto 0;
  font-size:16px;
  line-height:1.25
  }
  .thumb-info{
  padding:11px
  }
  .thumb-info h4{
  display:-webkit-box;
  min-height:38px;
  margin:0 0 5px;
  overflow:hidden;
  color:#27232e;
  font-size:14px;
  line-height:1.35;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2
  }
  .thumb-info p{
  margin:0;
  overflow:hidden;
  color:#77717f;
  font-size:12px;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap
  }
  .gallery-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  margin-top:24px
  }
  .gallery-actions button{
  padding:12px 17px;
  border:1px solid #d8d2e5;
  border-radius:9px;
  background:#fff;
  color:var(--primary);
  font-size:14px;
  font-weight:900
  }
  .gallery-actions button:first-child{
  border-color:var(--primary);
  background:var(--primary);
  color:#fff
  }
  .gallery-actions button:hover{
  transform:translateY(-1px)
  }
  .gallery-actions button[hidden]{
  display:none
  }
  .template-showcase+.catalog{
  margin-top:15px
  }

  @media(max-width:760px){
  .template-showcase{
  padding:18px;
  margin-top:22px
  }
  .gallery-heading{
  align-items:flex-start
  }
  .gallery-heading h3{
  font-size:25px
  }
  .gallery-total{
  font-size:33px
  }
  .gallery-toolbar{
  grid-template-columns:1fr;
  padding:13px
  }
  .thumbnail-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
  }
  .thumb-info{
  padding:9px
  }
  .thumb-info h4{
  font-size:13px
  }
  .gallery-actions{
  align-items:stretch;
  flex-direction:column
  }
  .gallery-actions button{
  width:100%
  }

  }


  /* Checkout choice modal */
  .upsell-dialog{
  width:min(590px,calc(100% - 36px));
  padding:34px 36px 28px;
  border-top:4px solid var(--primary)
  }
  .upsell-dialog .eyebrow{
  margin-bottom:10px
  }
  .upsell-dialog h2{
  max-width:510px;
  margin-bottom:12px;
  font-size:34px;
  letter-spacing:-1.1px
  }
  .upsell-copy{
  margin:0 0 16px;
  line-height:1.55
  }
  .upsell-callout{
  margin:0 0 18px;
  padding:11px 15px;
  border:1px solid #ddd6f4;
  border-radius:10px;
  background:#f5f2ff;
  color:#42385c;
  font-size:15px;
  line-height:1.45;
  font-weight:850;
  text-align:center
  }
  .upsell-benefits{
  display:grid;
  gap:7px;
  margin:0 0 17px;
  padding:0;
  list-style:none
  }
  .upsell-benefits li{
  position:relative;
  padding-left:27px;
  color:#34303b;
  font-size:15px;
  line-height:1.4
  }
  .upsell-benefits li:before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--primary);
  font-weight:900
  }
  .upsell-actions{
  display:grid;
  gap:10px
  }
  .upsell-actions .button{
  min-height:52px;
  font-size:16px
  }
  .checkout-choice{
  min-height:50px;
  padding:12px 16px;
  border:1px solid #bdb7ca;
  border-radius:9px;
  background:#fff;
  color:#34303b;
  font-size:14px;
  font-weight:850
  }
  .checkout-choice.current-choice:before{
  content:"CURRENT CHOICE · ";
  color:var(--primary);
  font-size:11px;
  letter-spacing:.4px
  }
  .checkout-choice:hover{
  border-color:var(--primary);
  background:#faf9ff
  }
  .checkout-preview-note{
  margin:13px 0 0!important;
  color:#8a8591!important;
  font-size:11px!important;
  text-align:center
  }
  .upsell-dialog [hidden]{
  display:none
  }
  .upsell-dialog .close{
  top:10px;
  right:15px
  }
  .upsell-dialog:focus{
  outline:none
  }

  @media(max-width:560px){
  .upsell-dialog{
  padding:29px 22px 23px
  }
  .upsell-dialog h2{
  font-size:28px
  }
  .upsell-copy{
  font-size:15px
  }
  .upsell-benefits li{
  font-size:14px
  }
  .upsell-actions .button{
  font-size:14px;
  gap:8px
  }

  }


  /* Compact visual proof before pricing */
  .featured-preview{
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.45fr);
  align-items:center;
  gap:48px;
  margin-top:26px;
  margin-bottom:58px;
  padding:31px;
  border:1px solid #e5e1ee;
  border-radius:18px;
  background:linear-gradient(120deg,#fbfaff,#fff 55%,#f8f5ff);
  box-shadow:0 16px 45px #2819430c
  }
  .featured-copy .eyebrow{
  margin-bottom:9px
  }
  .featured-copy h2{
  margin:0 0 11px;
  font-size:34px;
  line-height:1.12;
  letter-spacing:-1.3px
  }
  .featured-copy p:not(.eyebrow){
  margin:0 0 15px;
  color:var(--muted);
  font-size:16px;
  line-height:1.5
  }
  .featured-covers{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px
  }
  .featured-covers article{
  min-width:0;
  overflow:hidden;
  border:1px solid #ded9e7;
  border-radius:10px;
  background:#fff;
  box-shadow:0 8px 20px #25173512
  }
  .featured-art{
  position:relative;
  aspect-ratio:2/3;
  overflow:hidden;
  background:#f4f1f8
  }
  .featured-art img,
  .featured-art .featured-art-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
  }
  .featured-covers span{
  display:block;
  padding:8px 4px;
  color:#4f4a57;
  font-size:11px;
  line-height:1.2;
  font-weight:800;
  text-align:center
  }

  @media(max-width:980px){
  .featured-preview{
  grid-template-columns:1fr;
  gap:26px
  }
  .featured-copy{
  max-width:680px
  }
  .featured-covers span{
  font-size:12px
  }

  }

  @media(max-width:620px){
  .featured-preview{
  margin-bottom:42px;
  padding:21px
  }
  .featured-copy h2{
  font-size:29px
  }
  .featured-covers{
  grid-template-columns:repeat(3,1fr);
  gap:9px
  }
  .featured-covers span{
  font-size:11px
  }

  }


  /* Full mobile usability pass */
  :scope{
  max-width:100%;
  overflow-x:hidden
  }
  .bundle-grid,.bundle-card,.editor-shot,.template-showcase,.featured-preview{
  min-width:0
  }
  .table-scroll{
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch
  }
  .button,.secondary-button,.checkout-choice,.gallery-actions button,summary{
  min-height:44px
  }
  summary{
  align-items:flex-start
  }
  summary>span{
  flex:0 0 auto
  }

  @media(max-width:760px){
  :scope{
  padding-bottom:calc(82px + env(safe-area-inset-bottom))
  }
  .pageHeader{
  gap:10px;
  padding:12px 14px
  }
  .button.small{
  padding:10px 12px;
  white-space:nowrap
  }
  .hero{
  padding-top:32px;
  padding-bottom:28px
  }
  .hero h1{
  font-size:clamp(35px,10.6vw,41px);
  letter-spacing:-2.2px;
  overflow-wrap:normal
  }
  .hero .lede{
  line-height:1.5
  }
  .hero-note{
  line-height:1.45
  }
  .hero-visual{
  border-radius:14px
  }
  .hero-media img{
  min-height:260px;
  object-fit:cover
  }
  .hero-media--video{
  min-height:0
  }
  .hero-video-overlay{
  padding:18px
  }
  .visual-label{
  gap:12px
  }
  .visual-label b{
  min-width:0
  }
  .stats{
  gap:6px;
  padding:9px
  }
  .stats>div{
  padding:11px 6px
  }
  .stats b{
  font-size:24px
  }
  .featured-preview{
  border-radius:14px
  }
  .bundles-section{
  padding-top:24px
  }
  .bundle-heading{
  margin-bottom:28px
  }
  .bundle-body h3{
  font-size:26px
  }
  .bundle-price strong{
  font-size:49px
  }
  .bundle-price span{
  font-size:17px
  }
  .upgrade-note{
  margin:27px 0;
  padding:20px
  }
  .comparison-details{
  margin:28px 0
  }
  .comparison-details>summary{
  padding:17px;
  font-size:16px
  }
  .comparison table{
  font-size:13px
  }
  .comparison th,.comparison td{
  white-space:normal
  }
  .complete-story{
  padding-top:54px;
  padding-bottom:56px
  }
  .cover-parts article{
  padding:24px
  }
  .editor-controls{
  padding:20px
  }
  .editor-controls input{
  min-height:44px
  }
  .canvas-area{
  padding:18px 14px 14px
  }
  .editor-caption{
  line-height:1.45
  }
  .collection{
  padding:54px 0
  }
  .category-grid article{
  min-width:0
  }
  .template-showcase{
  border-radius:14px
  }
  .gallery-heading{
  gap:14px
  }
  .gallery-heading p{
  font-size:14px
  }
  .gallery-total{
  flex:0 0 auto
  }
  .faq summary{
  gap:13px;
  line-height:1.4
  }
  .standalone .button,.final-cta .button{
  width:100%;
  max-width:360px
  }
  .final-cta{
  padding:62px 18px
  }
  .final-cta h2{
  font-size:43px
  }
  .mobile-buybar{
  bottom:max(8px,env(safe-area-inset-bottom));
  left:8px;
  right:8px
  }
  .mobile-buybar a{
  min-height:44px;
  display:flex;
  align-items:center
  }
  .upsell-dialog{
  max-height:calc(100dvh - 20px);
  overflow:auto;
  overscroll-behavior:contain
  }

  }

  @media(max-width:420px){
  .draft{
  padding:6px 10px
  }
  .draft span{
  display:none
  }
  .pageHeader>.button.small{
  gap:6px;
  font-size:0
  }
  .pageHeader>.button.small:before{
  content:'View bundles';
  font-size:12px
  }
  .pageHeader>.button.small span{
  font-size:15px
  }
  .spt-wordmark>strong{
  font-size:17px
  }
  .hero h1{
  font-size:35px;
  letter-spacing:-1.8px
  }
  .hero .eyebrow{
  font-size:10px
  }
  .hero .lede{
  font-size:16px
  }
  .hero-media img{
  min-height:235px
  }
  .hero-video-overlay strong{
  font-size:19px
  }
  .hero-video-overlay small{
  max-width:220px;
  line-height:1.35
  }
  .visual-label{
  align-items:flex-start;
  padding:14px
  }
  .visual-label b{
  font-size:15px
  }
  .visual-label>span{
  font-size:27px
  }
  .stats{
  grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .stats b{
  font-size:21px
  }
  .stats span{
  font-size:12px
  }
  .featured-preview{
  padding:18px
  }
  .featured-copy h2{
  font-size:27px
  }
  .bundle-body{
  padding:23px 18px
  }
  .bundle-body .button{
  min-height:50px
  }
  .bundle-price strong{
  font-size:46px
  }
  .upgrade-note{
  padding:18px
  }
  .editor-controls{
  grid-template-columns:1fr
  }
  .editor-controls label,.editor-controls>button,.editor-controls>p:last-child{
  grid-column:1
  }
  .sample-canvas{
  aspect-ratio:1.25
  }
  .category-grid{
  grid-template-columns:1fr
  }
  .thumbnail-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .gallery-heading{
  display:grid;
  grid-template-columns:1fr auto
  }
  .gallery-heading p{
  grid-column:1/-1
  }
  .gallery-total{
  font-size:29px
  }
  .upsell-dialog{
  width:calc(100% - 16px);
  padding:27px 18px 20px
  }
  .upsell-dialog .eyebrow{
  padding-right:24px;
  font-size:10px;
  letter-spacing:1px
  }
  .upsell-dialog h2{
  font-size:26px
  }
  .upsell-callout{
  font-size:14px
  }
  .checkout-choice.current-choice:before{
  display:block;
  margin-bottom:2px
  }
  .mobile-buybar{
  padding-left:12px
  }
  .mobile-buybar b{
  font-size:12px
  }
  .mobile-buybar small{
  font-size:10px
  }

  }

}

.cover-templates-page,
.cover-templates-page * {
  --primary: #6047f5;
  --primary-dark: #4b32df;
  --ink: #171521;
  --muted: #686676;
}

/* Native <dialog> must stay viewport-centered. `position: relative` pins it top-left. */
dialog.upsell-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: min(640px, calc(100vw - 36px));
  max-width: calc(100vw - 36px);
  height: fit-content;
  max-height: calc(100dvh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 34px 36px 28px;
  border: 0;
  border-top: 4px solid #6047f5;
  border-radius: 16px;
  color: #171521;
  background: #fff;
  box-shadow: 0 28px 85px #0005;
}

dialog.upsell-dialog::backdrop {
  background: #100a25b8;
  backdrop-filter: blur(4px);
}

dialog.upsell-dialog .eyebrow {
  color: #6047f5;
  padding-right: 28px;
}

dialog.upsell-dialog .close {
  position: absolute;
  top: 10px;
  right: 15px;
}

.cover-templates-page .mobile-buybar {
  padding-right: 84px;
}

/* Hero YouTube embed — outside nested block so fill rules always win */
.cover-templates-page .hero-media.hero-media--video {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  background: #000;
  line-height: 0;
}

.cover-templates-page .hero-media.hero-media--video::after {
  content: none;
}

.cover-templates-page .hero-media.hero-media--video iframe,
.cover-templates-page .hero-media.hero-media--video .hero-video-facade,
.cover-templates-page .hero-media.hero-media--video .hero-video-facade img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.cover-templates-page .hero-media.hero-media--video .hero-video-facade {
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: #000;
  border: 0;
}

.cover-templates-page .hero-media.hero-media--video .hero-video-facade img {
  object-fit: cover;
  object-position: center;
}

.cover-templates-page .hero-media.hero-media--video .hero-video-facade .yt-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  width: 68px;
  height: 48px;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease, opacity 0.15s ease;
  pointer-events: none;
}

.cover-templates-page .hero-media.hero-media--video .hero-video-facade .yt-play-btn svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cover-templates-page .hero-media.hero-media--video .hero-video-facade .yt-play-btn__bg {
  fill: #212121;
  fill-opacity: 0.8;
  transition: fill 0.1s cubic-bezier(0.4, 0, 1, 1), fill-opacity 0.1s cubic-bezier(0.4, 0, 1, 1);
}

.cover-templates-page .hero-media.hero-media--video .hero-video-facade .yt-play-btn__icon {
  fill: #fff;
}

.cover-templates-page .hero-media.hero-media--video .hero-video-facade:hover .yt-play-btn,
.cover-templates-page .hero-media.hero-media--video .hero-video-facade:focus-visible .yt-play-btn {
  transform: translate(-50%, -50%) scale(1.08);
}

.cover-templates-page .hero-media.hero-media--video .hero-video-facade:hover .yt-play-btn__bg,
.cover-templates-page .hero-media.hero-media--video .hero-video-facade:focus-visible .yt-play-btn__bg {
  fill: #f00;
  fill-opacity: 1;
}