/* Hallmark · v2.0.0 · theme: source-led gallery (by request) · shape: index and isolated sections · job: compare reference layouts */
 /* critique: keep gallery controls quiet and reserve expressive compositions for the studies. */
/* Hallmark · waive 7b · source white surfaces · The live references intentionally use white on the Headspace surround and the Pitch canvas. */
/* Hallmark · waive 24b · measured reference spacing · The website studies retain their separate card spacing and responsive proportions. */
/* Hallmark · waive 38iii · brand hierarchy · Pitch uses bolder display lettering than the editorial gallery title. */
:root{
  --ext-violet:#272753;
--ext-blue:#193456;
--ext-green:#133b25;
--ext-brown:#483327;
--paper:#f4f2ed;
--white:#fff;
--ink:#191c20;
--mute:#5b6069;
--line:#dedbd4;
--action:#2f4a3c;
  --nav:64px;
--gutter:clamp(22px,6vw,92px);
--sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
--serif:Georgia,"Times New Roman",serif;
--mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  --black:#08090b;
--coal:#15161a;
--gray:#a3a5ae;
--smoke:#24252a;
--red:#ff6059;
--orange:#ff871c;
--yellow:#ffd55d;
  --navy:#102846;
--purple:#635bff;
--lav:#f2effe;
--blue:#2259d6;
--sky:#c6e9ff;
--cream:#f8f3e8;
--green:#066b4e;
--mint:#c8f4cb;
  --pink:#fac4e7;
--rose:#ffdce6;
--magenta:#e31e72;
--peach:#f7b594;
--tan:#efdcc4;
--cyan:#72e5f4;
--silver:#e5ebf1;
  --on-dark:#f7f6fb;
--glass:#ffffff24;
--dim:#00000035;
--shadow:#15132325;
--focus:#2966ff;
  --photo-text:#fff;
--overlay:#101118c9;
--none:transparent
}
*{
box-sizing:border-box}
html,body{
overflow-x:clip}
html{
scroll-behavior:smooth;
scroll-padding-top:calc(var(--nav) + 10px)}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font:16px/1.55 var(--sans)}
a{
color:inherit}
button,input{
font:inherit}
button{
cursor:pointer}
button,a,input,summary,[tabindex]{
outline-offset:4px}
:focus-visible{
outline:3px solid var(--focus)}
button:disabled{
cursor:default}
img,svg,video{
display:block;
max-width:100%}
img{
width:100%;
height:auto}
h1,h2,h3,p,figure{
margin:0}
h1,h2,h3{
overflow-wrap:break-word;
min-width:0}
h1,h2{
letter-spacing:-.06em;
line-height:.99}
h3{
line-height:1.16;
letter-spacing:-.035em}
p{
max-width:55ch}
ul{
padding-left:1.2em}
small{
font-size:.78rem}
button{
color:inherit}
.top{
height:var(--nav);
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:0 var(--gutter);
background:var(--paper);
border-bottom:1px solid var(--line);
position:sticky;
top:0;
z-index:20}
.top strong{
font-size:.92rem}
.top a{
text-decoration:none}
.top-actions{
display:flex;
gap:8px}
.plain{
border:1px solid var(--line);
background:var(--white);
padding:7px 12px;
border-radius:8px}
.plain:hover{
background:var(--silver)}
.intro{
max-width:1500px;
margin:auto;
padding:clamp(54px,8vw,125px) var(--gutter) 50px;
display:grid;
grid-template-columns:1.65fr .75fr;
gap:28px;
align-items:end}
.intro h1{
font:400 clamp(4rem,9vw,9.25rem)/.83 var(--serif);
letter-spacing:-.082em}
.intro p{
color:var(--mute);
max-width:33ch}
.intro small{
display:block;
margin-top:1rem}
.index{
max-width:1500px;
margin:auto;
padding:0 var(--gutter) 55px}
.index summary{
cursor:pointer;
border-block:1px solid var(--line);
padding:13px 0;
font-weight:650}
.jump{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:0 24px;
margin:16px 0 0;
padding:0;
list-style:none}
.jump a{
display:flex;
gap:10px;
align-items:baseline;
padding:8px 0;
border-bottom:1px solid var(--line);
text-decoration:none;
font-size:.86rem}
.jump a:hover{
text-decoration:underline}
.jump span,.num{
font:500 .75rem var(--mono);
color:var(--mute)}
.study{
scroll-margin-top:calc(var(--nav) + 5px);
border-top:1px solid var(--line)}
.study[hidden]{
display:none}
.meta{
max-width:1500px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
gap:14px;
padding:11px var(--gutter);
font-size:.8rem}
.meta span{
display:flex;
gap:10px;
align-items:center}
.meta a{
font-size:.76rem;
text-underline-offset:3px}
.stage{
--bg:var(--white);
--fg:var(--ink);
--soft:var(--paper);
--faint:var(--mute);
--edge:var(--line);
--accent:var(--purple);
--btn:var(--white);
position:relative;
background:var(--bg);
color:var(--fg);
overflow:clip}
.wrap{
max-width:1450px;
margin:auto;
padding:clamp(48px,7.2vw,110px) var(--gutter)}
.wrap.tight{
padding-block:clamp(34px,5vw,70px)}
.copy{
display:grid;
gap:16px;
margin-bottom:32px}
.copy.center{
text-align:center;
justify-items:center}
.copy.center p{
margin-inline:auto}
.stage h2{
font-size:clamp(2.5rem,5.45vw,5.35rem)}
.stage h3{
font-size:clamp(1.25rem,2.1vw,2.1rem)}
.stage p{
color:var(--faint)}
.stage .sub{
font-size:clamp(1.04rem,1.55vw,1.3rem)}
.stage small{
display:inline-block;
color:var(--faint)}
.split,.grid,.grid2,.grid4,.grid6{
display:grid;
gap:18px;
grid-template-columns:repeat(3,minmax(0,1fr))}
.split,.grid2{
grid-template-columns:repeat(2,minmax(0,1fr))}
.split{
gap:clamp(24px,5.5vw,75px);
align-items:center}
.grid4{
grid-template-columns:repeat(4,minmax(0,1fr))}
.grid6{
grid-template-columns:repeat(6,minmax(0,1fr))}
.stack{
display:grid;
gap:15px;
align-content:center}
.btnrow{
display:flex;
gap:10px;
flex-wrap:wrap;
align-items:center}
.button,.chip{
display:inline-flex;
justify-content:center;
align-items:center;
gap:7px;
border:1px solid var(--edge);
border-radius:100px;
padding:10px 16px;
background:var(--soft);
color:var(--fg);
text-decoration:none;
font-weight:620;
font-size:.86rem;
line-height:1.3}
.button.primary{
background:var(--accent);
border-color:var(--accent);
color:var(--btn)}
.button:hover,.chip:hover{
box-shadow:0 0 0 2px var(--edge)}
.chip{
padding:7px 11px;
font-size:.77rem}
.card{
background:var(--soft);
border:1px solid var(--edge);
border-radius:15px;
padding:22px;
min-width:0;
position:relative}
.card h3+p{
margin-top:8px}
.card .visual{
margin:-22px -22px 18px;
border-radius:14px 14px 0 0}
.card :last-child{
margin-bottom:0}
.visual{
background:var(--soft);
overflow:hidden;
min-width:0;
position:relative;
border-radius:14px;
aspect-ratio:var(--ratio,1.56);
display:grid;
align-items:center}
.visual img{
height:100%;
object-fit:cover}
.visual.fit img{
object-fit:contain}
.visual svg{
width:100%;
height:100%}
.visual>.pill-label{
position:absolute;
bottom:12px;
left:12px;
background:var(--overlay);
color:var(--white);
padding:4px 9px;
border-radius:10px;
font-size:.73rem}
.caption{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
padding:10px 0;
font-size:.85rem}
.icon{
display:grid;
place-items:center;
width:42px;
height:42px;
background:var(--accent);
color:var(--btn);
border-radius:12px;
font-weight:750;
font-size:1.2rem}
.rule{
border:0;
border-top:1px solid var(--edge);
margin:16px 0}
.light{
--bg:var(--white);
--soft:var(--paper)}
.dark{
--bg:var(--black);
--fg:var(--on-dark);
--soft:var(--coal);
--faint:var(--gray);
--edge:var(--smoke);
--accent:var(--white);
--btn:var(--black)}
.softblue{
--bg:var(--white);
--fg:var(--navy);
--soft:var(--lav);
--faint:var(--mute);
--accent:var(--purple)}
.green{
--bg:var(--cream);
--fg:var(--green);
--soft:var(--white);
--faint:var(--green);
--accent:var(--green)}
.clay{
--bg:var(--cream);
--soft:var(--white);
--accent:var(--ink)}
.pitch{
--bg:var(--white);
--fg:var(--ink);
--accent:var(--purple);
--soft:var(--lav)}
.cloud{
--fg:var(--navy);
--soft:var(--lav);
--accent:var(--purple)}
.el{
--fg:var(--ink);
--soft:var(--rose);
--accent:var(--magenta)}
.markgrid{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
align-items:center;
gap:16px}
.mark{
min-height:60px;
display:grid;
place-items:center;
font-size:clamp(.88rem,1.6vw,1.5rem);
font-weight:730;
letter-spacing:-.05em;
white-space:normal;
text-align:center}
.mark img{
max-width:104px;
max-height:39px;
object-fit:contain}
.mark.text{
font-family:var(--sans)}
.railbox{
position:relative;
min-width:0}
.rail{
display:grid;
grid-auto-flow:column;
grid-auto-columns:minmax(235px,calc((100% - 36px)/3));
gap:18px;
overflow-x:auto;
overscroll-behavior-inline:contain;
scroll-snap-type:x mandatory;
padding:5px 3px 16px;
scrollbar-color:var(--edge) var(--none)}
.rail>*{
scroll-snap-align:start;
min-width:0}
.rail.wide{
grid-auto-columns:minmax(290px,calc((100% - 18px)/2))}
.railnav{
display:flex;
gap:8px;
justify-content:flex-end;
margin:0 0 8px}
.arrow{
display:grid;
place-items:center;
border:1px solid var(--edge);
width:36px;
height:36px;
border-radius:50%;
background:var(--soft)}
.arrow:hover{
box-shadow:0 0 0 2px var(--edge)}
.band{
padding-block:12px;
overflow:hidden}
.band .rail{
padding-bottom:9px;
grid-auto-columns:minmax(205px,26%)}
.tabs{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:0 0 22px}
.tab[aria-selected=true]{
background:var(--fg);
color:var(--bg);
border-color:var(--fg)}
.panel{
margin-top:12px}
.panel[hidden]{
display:none}
.app{
background:var(--white);
color:var(--ink);
border:1px solid var(--line);
border-radius:13px;
box-shadow:0 15px 48px var(--shadow);
overflow:hidden}
.appbar{
display:flex;
align-items:center;
justify-content:space-between;
padding:13px 16px;
border-bottom:1px solid var(--line);
font-size:.82rem;
font-weight:680}
.appbody{
padding:15px;
display:grid;
gap:10px}
.uirow{
display:flex;
align-items:center;
gap:9px;
padding:8px 9px;
border-bottom:1px solid var(--line);
font-size:.8rem}
.uirow .icon{
width:26px;
height:26px;
border-radius:6px;
font-size:.78rem}
.uibar{
height:7px;
border-radius:50px;
background:var(--silver);
width:var(--bar,70%)}
.swatch{
background:var(--tone,var(--lav))}
.tone0{
--tone:var(--lav)}
.tone1{
--tone:var(--pink)}
.tone2{
--tone:var(--mint)}
.tone3{
--tone:var(--sky)}
.tone4{
--tone:var(--tan)}
.tone5{
--tone:var(--yellow)}
.tone6{
--tone:var(--cyan)}
.tone7{
--tone:var(--peach)}
.tiles{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px}
.tile{
border-radius:17px;
padding:clamp(20px,3vw,36px);
background:var(--tone,var(--soft));
overflow:hidden;
color:var(--ink)}
.tile p{
color:var(--mute)}
.tile .visual{
margin:16px 0 0}
.card-link{
margin-top:14px;
display:inline-flex;
text-underline-offset:3px;
font-size:.84rem}
.video-tile{
padding:0;
border:0;
display:block;
width:100%;
text-align:left;
background:var(--soft);
border-radius:14px;
overflow:hidden}
.play{
position:absolute;
bottom:12px;
left:12px;
display:grid;
place-items:center;
width:42px;
height:42px;
border-radius:50%;
background:var(--white);
color:var(--black);
box-shadow:0 4px 15px var(--shadow)}
.play svg{
width:14px;
height:14px}
.video-tile .visual{
border-radius:0}
.video-tile .caption{
padding:12px 15px}
.cta-strip{
padding:clamp(32px,5vw,65px);
border-radius:24px;
background:var(--soft);
overflow:hidden}
.jumpback{
display:block;
text-align:center;
padding:32px}
.notice{
color:var(--mute);
font-size:.82rem}
.note{
border:1px solid var(--edge);
border-radius:10px;
padding:9px 12px;
font-size:.78rem;
max-width:fit-content}
.stack-scroll{
padding-bottom:40px}
.sticky-card{
position:sticky;
top:calc(var(--nav) + 14px + var(--level,0)*18px);
min-height:min(500px,68vh);
margin-bottom:clamp(30px,8vh,95px);
padding:clamp(23px,4.6vw,60px);
border:1px solid var(--dim);
box-shadow:0 -9px 20px var(--shadow);
display:grid;
align-items:center}
.sticky-card:last-child{
margin-bottom:0}
.sticky-card .visual{
max-height:42vh}
.scrolly{
overflow:visible;
overflow-x:clip}
.scroll-layout{
max-width:1450px;
margin:auto;
padding-inline:var(--gutter)}
.status{
min-height:1.5em;
margin:12px 0 0}
.dialog{
border:1px solid var(--line);
border-radius:18px;
padding:20px;
max-width:min(720px,calc(100% - 32px));
width:100%;
background:var(--white);
color:var(--ink);
box-shadow:0 20px 80px var(--shadow)}
.dialog::backdrop{
background:var(--overlay)}
.dialog header{
display:flex;
justify-content:space-between;
align-items:center;
gap:8px;
margin-bottom:12px}
.dialog p{
margin-top:10px}
.dialog video{
width:100%;
border-radius:12px}
.dialog .visual{
border-radius:12px}
.search{
display:flex;
gap:10px;
margin:13px 0}
.search input{
width:100%;
padding:10px 13px;
border-radius:8px;
border:1px solid var(--line);
background:var(--white);
color:var(--ink)}
.search-count{
margin:5px 0 0}
.demoform{
display:flex;
gap:8px;
flex-wrap:wrap}
.demoform input{
min-width:0;
flex:1 1 180px;
padding:8px 12px;
background:var(--white);
color:var(--ink);
border:1px solid var(--line);
border-radius:8px}
.skip{
position:fixed;
z-index:100;
top:0;
left:10px;
padding:8px;
background:var(--white);
transform:translateY(-110%)}
.skip:focus{
transform:none}
.top-link{
white-space:nowrap}
:root{
--stripe-night:#0d1738;
--wire:#475680;
--wiregrid:#263353;
--wire-lit:#a9abff;
--stripe-node:#151f45;
--headspace-blue:#0061ef;
--pitch-purple:#281251;
--pitch-glow:#7d56c7;
--pitch-lilac:#c5a1ff;
--pitch-lime:#daffa4;
--el-plum:#421431;
--el-plum2:#2d1227;
--clay-sky:#f0f8ff;
--clay-peach:#fff0e5;
--clay-green:#eaf8e8;
--clay-pink:#fff0f8;
--book-paper:#f2f5fa;
--warm:#171411;
--warm-black:#0e0d0b;
--marsh:#fcf9e5}
.visually-hidden{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip-path:inset(50%);
white-space:nowrap;
border:0}
.stage .button{
width:max-content;
max-width:100%}
.stage h2 em,.stage h3 em{
font-style:normal}
.end-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:28px}
.end-head.split{
display:grid}
.abstract{
width:100%;
height:100%;
min-height:110px;
position:relative;
display:grid;
place-items:center;
overflow:hidden;
color:var(--ink);
background:var(--tone,var(--lav))}
.abstract i{
position:absolute;
display:block;
width:46%;
aspect-ratio:1;
border-radius:36%;
background:var(--white);
transform:rotate(-24deg);
opacity:.62}
.abstract i:nth-child(2){
width:32%;
transform:translate(68%,-29%) rotate(22deg);
background:var(--accent);
opacity:.32}
.abstract i:nth-child(3){
width:31%;
transform:translate(-75%,55%) rotate(35deg);
background:var(--white);
opacity:.48}
.abstract span{
z-index:1;
padding:8px 15px;
text-align:center;
font-size:.85rem;
font-weight:650}
.raycast{
--bg:var(--black);
--soft:var(--coal)}
.raycast .wrap{
position:relative}
.raycast h2,.framer h2{
font-size:clamp(2rem,4vw,3.65rem)}
.raycast .copy{
margin-bottom:20px}
.raycast .tab{
background:var(--coal)}
.raycast .tab[aria-selected=true]{
background:var(--white);
color:var(--black)}
.raycast .railnav{
position:absolute;
right:0;
bottom:-52px}
.raycast .card-link{
margin-top:20px}
.ext{
min-height:345px;
position:relative;
background:radial-gradient(ellipse at 65% 72%,var(--ext-glow),var(--coal) 86%);
border:1px solid var(--edge);
border-radius:22px;
overflow:hidden;
padding:20px 20px 0;
--ext-glow:var(--ext-violet)}
.ext1{
--ext-glow:var(--ext-blue)}
.ext2{
--ext-glow:var(--ext-green)}
.ext3{
--ext-glow:var(--ext-brown)}
.ext h3{
font-size:1rem;
letter-spacing:-.015em}
.ext p{
font-size:.85rem;
margin-top:8px}
.ext-name{
display:flex;
align-items:center;
gap:10px}
.ext-name img{
width:30px;
height:30px;
object-fit:contain}
.ext-name .icon{
width:30px;
height:30px;
font-size:.9rem}
.ext figure{
margin-top:14px;
min-height:210px;
display:grid;
align-items:end}
.ext figure img{
max-height:270px;
object-fit:contain}
.raycast .wrap{
padding-bottom:76px}
.framer{
--bg:var(--black)}
.showcase{
display:grid;
gap:12px;
padding-bottom:45px}
.showrow{
display:grid;
grid-auto-flow:column;
grid-auto-columns:clamp(310px,46vw,650px);
gap:12px;
overflow:auto;
overscroll-behavior-inline:contain;
padding:3px var(--gutter) 12px;
scrollbar-color:var(--edge) var(--none);
scroll-snap-type:x proximity}
.showrow .visual{
scroll-snap-align:center;
background:var(--coal);
border-radius:9px}
.showrow .visual.phone img{
object-fit:contain}
.showrow .visual.phone{
background:var(--coal)}
.showrow:nth-child(2){
padding-left:calc(var(--gutter) + 8vw)}
.framer .showrow{
grid-auto-columns:auto;
grid-auto-rows:clamp(185px,31vw,400px)}
.framer .showrow .visual{
width:clamp(330px,45vw,640px);
aspect-ratio:auto}
.framer .showrow .visual.phone{
width:clamp(122px,17vw,210px)}
.framer .showrow img{
height:100%;
max-height:clamp(185px,31vw,400px)}
.invideo{
--bg:var(--warm);
--accent:var(--yellow);
--btn:var(--warm-black);
--soft:var(--warm-black)}
.promo{
background:var(--warm-black);
padding:clamp(22px,4.5vw,58px);
border:1px solid var(--edge);
border-radius:14px}
.promo h2{
font-size:clamp(2.5rem,4.8vw,4.8rem);
font-stretch:condensed;
line-height:.94}
.promo h2 strong{
color:var(--yellow)}
.promo ul{
display:flex;
flex-wrap:wrap;
gap:8px 24px;
margin:0;
color:var(--gray);
font-size:.85rem}
.promo-reel{
--ratio:2.35}
.promo-reel video{
width:100%;
height:100%;
object-fit:contain}
.stripe-connect{
--bg:var(--stripe-night);
--faint:var(--sky)}
.stripe-connect h2,.stripe-book h2{
font-size:clamp(2.2rem,4.2vw,4rem)}
.stripe-connect .split{
grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.wiring{
border-radius:12px}
.node{
fill:var(--stripe-node);
stroke:var(--wire)}
.nodetext{
fill:var(--white);
font:14px var(--sans)}
.pulse{
stroke:var(--wire-lit);
stroke-dasharray:12 230;
animation:pulse 5s linear infinite}
@keyframes pulse{
to{
stroke-dashoffset:-242}
}
.stripe-book{
--soft:var(--book-paper)}
.book-wrap{
min-height:370px;
display:grid;
grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
background:var(--book-paper);
border-radius:8px;
overflow:hidden}
.book-wrap>.stack{
padding:40px}
.book-stage{
display:grid;
place-items:center;
min-height:330px;
background:linear-gradient(135deg,var(--book-paper),var(--lav));
perspective:900px}
.book-object{
width:145px;
height:218px;
position:relative;
display:grid;
align-content:space-between;
padding:13px 15px;
background:var(--stripe-night);
color:var(--white);
box-shadow:13px 14px 0 var(--navy),25px 28px 25px var(--shadow);
border-radius:3px 7px 7px 3px;
transform:rotateY(-18deg) rotateZ(-10deg);
transition:transform .35s ease}
.book-object:hover{
transform:rotateY(0) rotateZ(0)}
.book-object strong{
font:400 1.95rem/.9 var(--serif)}
.book-object small{
font-size:.64rem;
color:var(--sky)}
.book-object i{
display:block;
width:40px;
aspect-ratio:1;
border:1px solid var(--sky);
border-radius:50%;
position:absolute;
right:9px;
top:44px}
.press-mark{
display:grid;
place-items:center;
border:1px solid var(--navy);
border-radius:50%;
width:45px;
height:45px;
font:1.2rem var(--serif)}
.headspace .wrap{
max-width:1500px}
.head-card{
--fg:var(--white);
--faint:var(--white);
--accent:var(--white);
--btn:var(--headspace-blue);
--soft:var(--headspace-blue);
--edge:var(--white);
background:var(--headspace-blue);
color:var(--white);
border-radius:18px;
padding:clamp(25px,5vw,65px);
overflow:hidden}
.head-card h2{
font-size:clamp(2.05rem,3.65vw,3.6rem);
letter-spacing:-.044em}
.head-card .copy{
margin:0}
.head-card .visual{
background:var(--headspace-blue);
--ratio:1.16}
.elementor-mcp .end-head{
margin-bottom:38px}
.elementor-mcp h2,.el-freedom h2,.el-steps h2{
font-size:clamp(2.55rem,4.6vw,4.75rem)}
.mcp-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
align-items:stretch}
.mcp-grid .tile{
background:linear-gradient(152deg,var(--el-plum),var(--el-plum2));
color:var(--white);
padding:20px}
.mcp-grid .tile p{
color:var(--pink);
font-size:.86rem}
.mcp-grid .tile h3{
font-size:1.25rem}
.mcp-grid .tile:nth-child(3n+1){
grid-row:span 2;
min-height:360px}
.mcp-grid .visual{
background:var(--glass);
aspect-ratio:1.45;
padding:10px}
.mcp-grid .app{
opacity:.94}
.mcp-grid .appbody{
padding:4px}
.mcp-grid .appbar{
padding:6px 7px}
.mcp-grid .uirow{
font-size:.66rem;
padding:4px}
.mcp-grid .tile:nth-child(3n+1) .visual{
aspect-ratio:1}
.el-freedom .showrow{
grid-auto-columns:clamp(290px,43vw,610px)}
.staircase{
align-items:start}
.el-step{
display:grid;
gap:10px}
.el-step:nth-child(2){
margin-top:65px}
.el-step:nth-child(3){
margin-top:130px}
.el-step .visual{
background:var(--black);
--ratio:1.05}
.el-steps .btnrow{
margin-top:25px}
.tag-run{
display:flex;
gap:9px;
justify-content:safe center;
overflow-x:auto;
padding:10px 3px}
.tag-run span{
flex:none;
background:var(--white)}
.clay-stack{
--bg:var(--white)}
.clay-topline{
display:flex;
justify-content:space-between;
gap:12px;
padding:22px 0 12px;
align-items:center}
.clay-topline nav{
display:flex;
flex-wrap:wrap;
gap:6px}
.clay-topline p{
font-size:.86rem}
.clay-level0{
--level:0;
--tone:var(--clay-sky);
--clay-text:var(--blue)}
.clay-level1{
--level:1;
--tone:var(--clay-peach);
--clay-text:var(--warm)}
.clay-level2{
--level:2;
--tone:var(--clay-green);
--clay-text:var(--green)}
.clay-level3{
--level:3;
--tone:var(--clay-pink);
--clay-text:var(--magenta)}
.clay-stack h3{
font-size:clamp(2rem,4.35vw,4.4rem)}
.clay-stack em{
color:var(--clay-text)}
.clay-label{
width:max-content;
background:var(--clay-text);
color:var(--white)}
.clay-stack .sticky-card .visual{
background:var(--tone)}
.clay-learn{
--bg:var(--white)}
.resource-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
grid-auto-rows:minmax(190px,auto);
gap:12px}
.resource{
background:var(--tone);
border-radius:15px;
padding:20px;
display:flex;
flex-direction:column;
justify-content:flex-end;
gap:18px;
overflow:hidden}
.resource img{
max-height:160px;
object-fit:cover;
border-radius:10px}
.resource h3{
font-size:1.25rem}
.resource0{
grid-row:span 2}
.resource1{
grid-column:span 2}
.resource1 img{
align-self:flex-end;
max-width:200px;
object-fit:contain}
.resource small{
margin-bottom:6px}
.screenshots{
max-width:1500px;
margin:auto;
padding:0 var(--gutter);
background:var(--paper)}
.screenshots>summary{
list-style:none;
display:flex;
gap:12px;
justify-content:space-between;
align-items:center;
cursor:pointer;
padding:14px 0;
font-size:.92rem;
font-weight:680}
.screenshots>summary::-webkit-details-marker{
display:none}
.screenshots>summary::before{
content:"+";
font-size:1.15rem}
.screenshots[open]>summary::before{
content:"−"}
.screenshots>summary span{
margin-left:auto;
color:var(--mute);
font-size:.8rem;
font-weight:500}
.screenshots>.section-note{
color:var(--mute);
font-size:.82rem;
padding:0 0 20px}
.screenshots>div{
padding:0 0 18px}
.screenshots .chip{
background:var(--white);
color:var(--ink);
border-color:var(--line)}
.screenshots .chip[aria-selected=true]{
background:var(--action);
color:var(--white);
border-color:var(--action)}
.shot-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:15px}
.shot-grid.mobile{
max-width:850px;
margin:auto}
.shot-grid figure{
min-width:0}
.shot-grid figcaption{
margin-bottom:7px;
font-size:.82rem;
font-weight:600}
.shot-button{
padding:0;
border:1px solid var(--line);
border-radius:9px;
overflow:hidden;
background:var(--white);
display:block;
width:100%;
cursor:zoom-in}
.shot-button img{
width:100%;
height:auto}
.unavailable{
padding:15px;
color:var(--mute);
background:var(--white);
border:1px solid var(--line);
border-radius:8px}
.dialog{
max-height:calc(100vh - 26px);
overflow:auto}
.dialog header{
position:sticky;
top:-20px;
background:var(--white);
z-index:1;
padding:5px 0}
.dialog header h2{
font-size:1.05rem;
letter-spacing:-.02em;
line-height:1.15}
.dialog .dialog-content img{
width:100%;
height:auto}
.dialog.large{
max-width:min(1280px,calc(100% - 24px))}
@media(max-width:1050px){.grid6{
grid-template-columns:repeat(3,minmax(0,1fr))}
.mcp-grid{
grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
:root{
--nav:54px}
.intro{
grid-template-columns:1fr;
gap:25px}
.intro h1{
font-size:clamp(4.2rem,14vw,7rem)}
.intro p{
max-width:41ch}
.jump{
grid-template-columns:repeat(2,minmax(0,1fr))}
.grid,.grid4,.grid6{
grid-template-columns:repeat(2,minmax(0,1fr))}
.split,.stripe-connect .split{
grid-template-columns:1fr;
gap:22px}
.copy{
margin-bottom:24px}
.markgrid{
grid-template-columns:repeat(3,minmax(0,1fr))}
.mcp-grid{
grid-template-columns:repeat(2,minmax(0,1fr))}
.mcp-grid .tile:nth-child(3n+1){
grid-row:auto;
min-height:unset}
.mcp-grid .tile:nth-child(3n+1) .visual{
aspect-ratio:1.45}
.resource-grid{
grid-template-columns:repeat(2,minmax(0,1fr))}
.resource0{
grid-row:auto}
.resource1{
grid-column:auto}
.staircase{
grid-template-columns:repeat(3,minmax(0,1fr))}
.el-step:nth-child(2){
margin-top:30px}
.el-step:nth-child(3){
margin-top:60px}
.sticky-card{
min-height:unset;
padding:22px}
.sticky-card .visual{
max-height:260px}
.head-card .visual{
max-height:390px}
}
@media(max-width:495px){.top-link{
display:none}
.jump,.grid,.grid2,.tiles,.grid4,.grid6,.shot-grid{
grid-template-columns:1fr}
.intro{
padding-top:54px}
.end-head{
flex-wrap:wrap;
gap:12px}
.meta{
align-items:flex-start}
.meta span{
flex-wrap:wrap;
gap:5px 8px}
.meta .meta-title{
font-size:.73rem}
.meta a{
padding-top:2px}
.stage h2{
font-size:clamp(2.3rem,10.2vw,3.1rem)}
.card{
padding:16px}
.card .visual{
margin:-16px -16px 15px}
.mcp-grid,.resource-grid,.featurepair{
grid-template-columns:1fr}
.mcp-grid .visual{
max-height:170px}
.markgrid{
grid-template-columns:repeat(3,minmax(0,1fr))}
.el-step:nth-child(n){
margin-top:0}
.staircase{
grid-template-columns:1fr;
gap:30px}
.el-step .visual{
max-height:220px}
.book-wrap{
grid-template-columns:1fr}
.book-wrap>.stack{
padding:22px}
.book-stage{
min-height:285px}
.clay-topline{
flex-direction:column;
align-items:start}
.sticky-card{
top:calc(var(--nav) + 8px + var(--level,0)*9px)}
.sticky-card .visual{
max-height:210px}
.screenshots>summary span{
font-size:.7rem}
.dialog{
padding:12px}
.dialog header{
top:-12px}
.shot-grid{
gap:18px}
.tag-run{
justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{
animation-duration:.01ms!important;
animation-iteration-count:1!important;
transition-duration:.01ms!important;
scroll-behavior:auto!important}
}
.book-stage.cover-available{
background:var(--tan)}
.real-book{
width:clamp(145px,18vw,250px);
max-height:330px;
object-fit:contain;
filter:drop-shadow(13px 15px 14px var(--shadow));
transform:rotate(-3deg);
transition:transform .26s ease}
.real-book:hover{
transform:rotate(0)}
/* Contina and Reels template studies. */
:root{
  --atlas-bebas:"Atlas Bebas","Arial Narrow",Impact,sans-serif;
  --atlas-boldonse:"Atlas Boldonse",Impact,"Arial Narrow",sans-serif;
  --ct-gray:#efefef;
  --ct-pink:#f1bbfc;
  --ct-lilac:#bab9fa;
  --ct-peach:#ffdfb9;
  --ct-lime:#e6faa9;
  --ct-blue:#cbdcff;
  --reel-gray:#f3f3f3;
  --reel-ink:#161616;
  --reel-purple:#8059ed;
  --reel-blue:#579afa;
  --reel-green:#39cea2;
  --reel-yellow:#ffc34b;
  --reel-orange:#ff9f74;
  --reel-cloud:#dedede;
}
.contina{
  --bg:var(--ct-gray);
  --accent:var(--ct-pink);
  --btn:var(--ink);
  --edge:var(--ink);
  --soft:var(--ct-gray);
}
.contina h2{
  font-family:var(--atlas-bebas);
  font-weight:400;
  letter-spacing:-.016em;
}
.contina h2{font-size:clamp(2.8rem,5.3vw,5rem)}






.contina .button{border-radius:6px}