/* Stacked Scenes site styles. Tokens follow the stacked-scenes-brand skill. */
:root{
  color-scheme: light;
  --berry:#E8336D; --tangerine:#FF7A1A; --sunshine:#FFC62B; --leaf:#3DBB68;
  --lagoon:#10A8A4; --cobalt:#2F66F0; --violet:#7A4BDF;
  --ink:#1F1846; --ink-soft:#4B4570; --mist:#F6F4FC; --line:#E6E2F3; --paper:#FFFFFF;
  --display:"Titan One","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
  --lead:var(--berry); --lead-ink:#fff; --tint:#FFE3EC;
  --gutter:clamp(16px,4vw,32px);
  --max:1160px;
}
.c-berry{--lead:var(--berry);--lead-ink:#fff;--tint:#FFE3EC}
.c-cobalt{--lead:var(--cobalt);--lead-ink:#fff;--tint:#E3EBFF}
.c-sunshine{--lead:var(--sunshine);--lead-ink:var(--ink);--tint:#FFF3CF}
.c-leaf{--lead:var(--leaf);--lead-ink:var(--ink);--tint:#DFF5E6}
.c-tangerine{--lead:var(--tangerine);--lead-ink:var(--ink);--tint:#FFE8D6}
.c-lagoon{--lead:var(--lagoon);--lead-ink:#fff;--tint:#D9F4F3}
.c-violet{--lead:var(--violet);--lead-ink:#fff;--tint:#ECE4FB}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;font-weight:500}
img,svg{max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:.005em}
h1{font-size:clamp(38px,6vw,64px)}
h2{font-size:clamp(28px,4vw,42px)}
h3{font-size:clamp(20px,2.2vw,24px)}
p{margin:0}
.prose p,.lede{max-width:62ch}
.lede{font-size:clamp(18px,2vw,21px);color:var(--ink-soft)}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.label{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:10}
.skip:focus{left:8px}

/* stacked wordmark */
.stack{font-family:var(--display);color:var(--paper);line-height:.95;
  text-shadow:.04em .04em 0 var(--sunshine),.08em .08em 0 var(--tangerine),.12em .12em 0 var(--berry),.16em .16em 0 var(--violet),.20em .20em 0 var(--cobalt);
  -webkit-text-stroke:.018em var(--ink);paint-order:stroke fill}
.stack.on-dark{-webkit-text-stroke:0}

/* preview banner */
.draft-bar{background:var(--ink);color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:6px 12px}

/* header */
.site-head{border-bottom:2px dashed var(--line);background:var(--paper)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand svg{width:40px;height:40px;flex:none}
.brand .stack{font-size:25px;letter-spacing:.01em;color:var(--ink);-webkit-text-stroke:0;text-shadow:.05em .05em 0 var(--sunshine),.1em .1em 0 var(--berry)}
.nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nav a{text-decoration:none;font-weight:700;font-size:15.5px;padding:8px 12px;border-radius:999px}
.nav a:hover{background:var(--mist)}
.nav a[aria-current="page"]{background:var(--mist);box-shadow:inset 0 0 0 2px var(--ink)}
.nav a.nav-free{background:var(--sunshine);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.nav a.nav-free:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}

/* sections */
.section{padding-block:clamp(48px,7vw,88px);border-top:2px dashed var(--line)}
.section:first-of-type{border-top:0}
.section-head{display:grid;gap:12px;margin-bottom:clamp(24px,4vw,40px)}
.section-head.row{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.more{font-weight:800;text-decoration:none;border-bottom:3px solid var(--lead);padding-bottom:2px}
.more:hover{border-bottom-color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--body);font-weight:800;font-size:17px;text-decoration:none;border-radius:999px;padding:14px 24px;border:2.5px solid var(--ink);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;line-height:1.1}
.btn-primary{background:var(--ink);color:#fff;box-shadow:4px 4px 0 var(--lead)}
.btn-secondary{background:var(--paper);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.btn-sun{background:var(--sunshine);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.btn:hover{transform:translate(-2px,-2px)}
.btn-primary:hover{box-shadow:6px 6px 0 var(--lead)}
.btn-secondary:hover,.btn-sun:hover{box-shadow:6px 6px 0 var(--ink)}
.btn[aria-disabled="true"],.btn:disabled{background:rgba(255,255,255,.7);color:var(--ink-soft);border-style:dashed;border-color:var(--ink-soft);cursor:not-allowed;transform:none;box-shadow:none}

/* badges and chips */
.badges{display:flex;flex-wrap:wrap;gap:6px}
.badge{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:5px 11px;background:var(--ink);color:#fff;white-space:nowrap}
.badge.lead{background:var(--lead);color:var(--lead-ink)}
.badge.soft{background:var(--mist);color:var(--ink)}
.chip{display:inline-block;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border-radius:999px;padding:4px 10px;background:var(--lead);color:var(--lead-ink)}

/* hero */
.hero{padding-block:clamp(36px,6vw,72px) clamp(48px,7vw,88px)}
.hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero h1.stack{font-size:clamp(60px,10.5vw,128px);margin-bottom:28px}
.hero .tagline{font-family:var(--display);font-size:clamp(22px,2.6vw,30px);line-height:1.15;margin-bottom:12px}
.hero .lede{margin-bottom:28px}
.hero .actions{display:flex;flex-wrap:wrap;gap:14px}
.stripe{display:flex;height:12px;border-radius:6px;overflow:hidden;margin-top:34px;max-width:360px}
.stripe span{flex:1}
.hero-art{justify-self:center;width:min(100%,460px)}

/* shadow box presentation */
.box{background:#2A2336;padding:5.5%;border-radius:10px;box-shadow:0 26px 50px rgba(31,24,70,.28),inset 0 0 0 2px rgba(255,255,255,.06);position:relative}
.box .mat{background:#F4EFE6;padding:2.5%;box-shadow:inset 0 2px 8px rgba(0,0,0,.25)}
.art{display:block;width:100%;height:auto;aspect-ratio:1}
.box .art{background:#fff}
@media (prefers-reduced-motion:no-preference){
  .hero-art .art path{animation:settle .9s cubic-bezier(.2,.8,.2,1) both}
  .hero-art .art path:nth-child(3){animation-delay:.06s}
  .hero-art .art path:nth-child(4){animation-delay:.12s}
  .hero-art .art path:nth-child(5){animation-delay:.18s}
  .hero-art .art path:nth-child(6){animation-delay:.24s}
  .hero-art .art path:nth-child(7){animation-delay:.30s}
  .hero-art .art path:nth-child(8){animation-delay:.36s}
  .hero-art .art path:nth-child(9){animation-delay:.42s}
  .hero-art .art path:nth-child(10){animation-delay:.48s}
  .hero-art .art path:nth-child(11){animation-delay:.54s}
  @keyframes settle{from{transform:translateY(22px)}to{transform:none}}
}

/* product cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(20px,3vw,32px)}
.card{display:grid;gap:14px;text-decoration:none;align-content:start}
.card .pic{position:relative;aspect-ratio:1;border-radius:18px;background:linear-gradient(160deg,var(--tint),#fff 120%);border:2.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink);display:grid;place-items:center;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.card .pic img{width:100%;height:100%;object-fit:cover}
.card .pic .art{width:72%;filter:drop-shadow(0 14px 18px rgba(31,24,70,.28))}
.card .pic .badge{position:absolute;top:12px;left:12px}
.card:hover .pic{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--lead)}
.card .meta{display:grid;gap:6px}
.card h3{font-size:22px}
.card .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.price{font-family:var(--display);font-size:20px}
.price small{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-soft);margin-left:6px;vertical-align:middle}
.soon{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.empty{background:var(--mist);border-radius:18px;padding:28px;display:grid;gap:10px;max-width:640px}

/* collections */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.col{background:var(--lead);color:var(--lead-ink);border-radius:20px;padding:26px 24px 22px;text-decoration:none;display:grid;gap:10px;align-content:start;border:2.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink);min-height:210px;position:relative;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.col::after{content:"";position:absolute;right:-30px;bottom:-30px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.16);box-shadow:-34px -20px 0 -10px rgba(255,255,255,.12)}
.col:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.col h3{font-size:28px;position:relative;z-index:1}
.col p{font-size:15.5px;opacity:.95;position:relative;z-index:1}
.col .count{font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;margin-top:auto;position:relative;z-index:1}

/* how it works: the steps are a real sequence */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:step;list-style:none;margin:0;padding:0}
.steps li{border-radius:18px;padding:22px 18px;display:grid;gap:8px;align-content:start;background:var(--mist);position:relative}
.steps li::before{counter-increment:step;content:counter(step);font-family:var(--display);font-size:22px;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--lead);color:var(--lead-ink);box-shadow:3px 3px 0 var(--ink);margin-bottom:6px}
.steps li b{font-size:17px;line-height:1.3}
.steps li span{font-size:15px;color:var(--ink-soft);line-height:1.5}

/* freebie band */
.free-band{background:var(--sunshine);border-block:2.5px solid var(--ink)}
.free-band .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,5vw,56px);align-items:center;padding-block:clamp(44px,6vw,72px)}
.free-band h2{font-size:clamp(30px,4.4vw,46px)}
.free-art{justify-self:center;width:min(100%,340px);transform:rotate(-3deg)}
.signup{display:grid;gap:12px}
.signup .field{display:flex;gap:10px;flex-wrap:wrap}
.signup label{font-weight:800}
.signup input{flex:1 1 220px;min-width:0;font:inherit;font-size:17px;padding:14px 18px;border-radius:999px;border:2.5px solid var(--ink);background:#fff;color:var(--ink)}
.signup input:disabled{background:rgba(255,255,255,.6)}
.signup .note{font-size:14px;color:var(--ink-soft)}
.free-band .signup .note{color:var(--ink)}

/* faq */
.faq{display:grid;gap:12px;max-width:820px}
.faq details{border:2px solid var(--ink);border-radius:16px;background:#fff;padding:0 20px}
.faq summary{cursor:pointer;font-weight:800;font-size:17.5px;padding:18px 0;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:24px;line-height:1;color:var(--lead);flex:none}
.faq details[open] summary::after{content:"–"}
.faq details > div{padding-bottom:18px;color:var(--ink-soft);display:grid;gap:10px}
.faq details > div p{max-width:68ch}

/* page head */
.page-head{background:var(--tint);border-bottom:2.5px solid var(--ink)}
.page-head .wrap{padding-block:clamp(36px,6vw,64px);display:grid;gap:14px}
.page-head.lead-bg{background:var(--lead);color:var(--lead-ink)}
.page-head.lead-bg .lede,.page-head.lead-bg .label{color:inherit;opacity:.92}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filters button{font:inherit;font-weight:800;font-size:15px;border-radius:999px;padding:8px 16px;border:2px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--lead);color:var(--lead-ink);box-shadow:3px 3px 0 var(--ink)}

/* product page */
.product{padding-block:clamp(28px,5vw,56px)}
.product .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.crumbs{font-size:14px;color:var(--ink-soft);margin-bottom:6px}
.crumbs a{text-decoration:none;font-weight:700}
.crumbs a:hover{text-decoration:underline}
.gallery{display:grid;gap:14px;position:sticky;top:16px}
.gallery .main{aspect-ratio:1;border-radius:20px;overflow:hidden;border:2.5px solid var(--ink);box-shadow:6px 6px 0 var(--lead);background:linear-gradient(160deg,var(--tint),#fff 120%);display:grid;place-items:center}
.gallery .main img{width:100%;height:100%;object-fit:cover}
.gallery .main .box{width:76%}
.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.thumbs button{padding:0;border:2px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;background:#fff;aspect-ratio:1}
.thumbs button[aria-current="true"]{border-color:var(--ink);box-shadow:3px 3px 0 var(--lead)}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.info{display:grid;gap:20px}
.info h1{font-size:clamp(36px,5vw,54px)}
.info .price{font-size:32px}
.buy{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.buy-note{font-size:14.5px;color:var(--ink-soft)}
.panel{background:var(--mist);border-radius:18px;padding:22px 24px;display:grid;gap:12px}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ticks li{padding-left:30px;position:relative;line-height:1.45}
.ticks li::before{content:"";position:absolute;left:0;top:.2em;width:18px;height:18px;border-radius:5px;background:var(--lead);box-shadow:2px 2px 0 var(--ink)}

/* layer viewer */
.viewer{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,56px);align-items:center}
.toggle{display:inline-flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden;margin-bottom:22px}
.toggle button{font:inherit;font-weight:800;font-size:15px;padding:8px 18px;border:0;background:#fff;color:var(--ink);cursor:pointer}
.toggle button[aria-pressed="true"]{background:var(--ink);color:#fff}
.layers3d{perspective:1800px;aspect-ratio:1;display:grid;place-items:center;max-width:520px;margin-inline:auto;width:100%}
.layers3d .stage{position:relative;width:78%;aspect-ratio:1;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.layers3d .stage svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 3px 3px rgba(10,12,30,.4));transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.layers3d.exploded .stage{transform:rotateX(56deg) rotateZ(-34deg) scale(.8)}
.layers3d.exploded .stage svg{transform:translateZ(calc(var(--i) * 30px))}
@media (prefers-reduced-motion:reduce){.layers3d .stage,.layers3d .stage svg{transition:none}}
.layer-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.layer-list li{display:grid;grid-template-columns:30px 28px 1fr;gap:12px;align-items:center;padding:8px 0;border-bottom:1.5px dashed var(--line)}
.layer-list .n{font-family:var(--mono);font-size:13px;color:var(--ink-soft)}
.layer-list .sw{width:28px;height:28px;border-radius:7px;box-shadow:2px 2px 0 var(--ink);border:1.5px solid rgba(31,24,70,.2)}
.layer-list b{display:block;font-size:16px;line-height:1.3}
.layer-list span{font-size:14px;color:var(--ink-soft)}

/* long-form pages */
.doc{padding-block:clamp(36px,6vw,64px)}
.doc .wrap{display:grid;grid-template-columns:220px 1fr;gap:clamp(24px,5vw,64px);align-items:start}
.toc{position:sticky;top:16px;display:grid;gap:4px;font-size:15px}
.toc a{text-decoration:none;font-weight:700;padding:6px 10px;border-radius:8px}
.toc a:hover{background:var(--mist)}
.prose{display:grid;gap:18px;max-width:720px}
.prose h2{font-size:clamp(26px,3.4vw,34px);margin-top:22px;scroll-margin-top:16px}
.prose h3{margin-top:8px}
.prose ul,.prose ol{margin:0;padding-left:22px;display:grid;gap:8px}
.prose li{padding-left:4px}
.prose .tip{background:var(--tint);border:2px solid var(--ink);border-radius:16px;padding:16px 20px;box-shadow:4px 4px 0 var(--lead)}
.prose .tip b{display:block;margin-bottom:4px}
.prose table{border-collapse:collapse;width:100%;font-size:15.5px}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1.5px dashed var(--line);vertical-align:top}
.prose th{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.table-wrap{overflow-x:auto}
.updated{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft)}

/* footer */
.site-foot{background:var(--ink);color:#DCD8F0;margin-top:0}
.site-foot .wrap{padding-block:56px 36px;display:grid;gap:36px}
.foot-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}
.site-foot .stack{font-size:38px;margin-bottom:12px}
.site-foot h2{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sunshine);font-weight:500;margin-bottom:12px}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-foot a{text-decoration:none;font-weight:600;color:#fff}
.site-foot a:hover{text-decoration:underline}
.foot-small{border-top:1.5px dashed rgba(255,255,255,.2);padding-top:22px;font-size:13.5px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#B9B3D9}
.foot-stripe{display:flex;height:8px}
.foot-stripe span{flex:1}

@media (max-width:980px){
  .steps{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-top > :first-child{grid-column:1/-1}
}
@media (max-width:820px){
  .hero .wrap,.product .wrap,.viewer,.free-band .wrap{grid-template-columns:1fr}
  .hero-art{width:min(100%,380px)}
  .gallery{position:static}
  .doc .wrap{grid-template-columns:1fr}
  .toc{position:static;display:flex;flex-wrap:wrap;gap:6px}
  .toc a{background:var(--mist)}
  .free-art{width:min(70%,260px);order:-1}
}
@media (max-width:520px){
  body{font-size:16.5px}
  .brand .stack{font-size:21px}
  .brand svg{width:34px;height:34px}
  .nav{gap:2px;width:100%;justify-content:space-between}
  .nav a{padding:7px 9px;font-size:14.5px}
  .btn{width:100%}
  .buy .btn{width:100%}
  .thumbs{grid-template-columns:repeat(4,1fr)}
}