/* Homepage layout and motion. Component appearance lives in components.css;
   the shared blue canvas comes from site-theme.css. */
.home{
  --home-ink:#15161E;--home-muted:#5B5E70;--home-line:#E6E8EF;
  --home-surface:#F5F6FA;--home-surface-2:#EEF2FF;--home-tick:#2B59FF;
  --home-ease:cubic-bezier(.2,.8,.2,1);
  margin:0;background:#193BB5;color:var(--home-ink);
}
.home main{overflow-x:clip}
.home h1,.home h2,.home h3{font-weight:800;color:var(--home-ink)}

/* Header: sticks, and gains a hairline once the page moves. */
.home-top{position:sticky;top:0;z-index:20;max-width:none;padding:18px max(5%,calc((100% - 1296px)/2));background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);transition:box-shadow .25s,padding .25s}
.home-top[data-scrolled]{box-shadow:0 1px 0 var(--home-line),0 8px 24px rgba(21,22,30,.05);padding-top:12px;padding-bottom:12px}
.home-top .brand{font-size:24px;letter-spacing:-.03em}
.home-top .brand img{transition:transform .35s var(--home-ease)}
.home-top nav{gap:22px}
.pb-button .arrow{display:inline-block;transition:transform .2s var(--home-ease)}
.pb-button:hover .arrow{transform:translateX(4px)}
.home-link{font-size:15px;font-weight:700;color:var(--home-ink);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;transition:text-decoration-color .2s}
.home-link:hover{text-decoration-color:currentColor}

/* Hero: the headline, then a sample pet right across the page: its photo, an
   arrow, and the same pet in bricks (sales-demo.css). */
.home-hero{max-width:1296px;margin:0 auto;padding:20px 5% 44px;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,2.6vw,36px);box-sizing:content-box}
.hero-copy{text-align:center}
.home-hero h1{font-size:clamp(56px,6.6vw,98px);line-height:.95;letter-spacing:-.058em;margin:0 0 22px;text-wrap:balance}
.hero-sub{max-width:44em;margin:0 auto;font-size:18px;line-height:1.5;color:var(--home-muted)}
/* One line where there is room for it; phones keep the two lines. */
@media(min-width:701px){
  .home-hero h1 br{display:none}
  .home-hero{padding-top:clamp(30px,6.4svh,68px)}
  .home-hero h1{margin-bottom:clamp(24px,3.4svh,34px)}
  .home-hero h1 span:first-child::after{content:" ";white-space:pre-wrap}
  .hero-sub{text-wrap:balance}
}

/* Price, right under the hero: two big toy bricks pushed together. The yellow
   one is the price; the blue one says what it buys and where to start. Studs
   run along the top of each (a mask, so they take the brick's own colour). */
.home-price{max-width:1296px;margin:0 auto;padding:0 5% 24px;box-sizing:content-box}
.price-card{--stud:15px;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;padding-top:var(--stud)}
.price-brick{--brick:var(--pb-blue);--lip:var(--pb-blue-lip);position:relative;border-radius:18px;background:var(--brick);box-shadow:inset 0 -10px 0 var(--lip),0 22px 44px rgba(5,14,66,.32)}
.price-brick::before{content:"";position:absolute;left:22px;right:22px;bottom:calc(100% - 1px);height:var(--stud);background:linear-gradient(rgba(255,255,255,.34) 0 3px,transparent 3px),var(--brick);
  -webkit-mask:var(--stud-shape) 0 0/58px 100% space no-repeat;mask:var(--stud-shape) 0 0/58px 100% space no-repeat;
  --stud-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 15' preserveAspectRatio='none'%3E%3Cpath d='M7 15V5a4 4 0 0 1 4-4h36a4 4 0 0 1 4 4v10z'/%3E%3C/svg%3E")}
.price-tag{--brick:var(--site-accent,#FFCE55);--lip:var(--site-action-lip,#BE8D19);z-index:1;display:grid;align-content:center;justify-items:center;gap:5px;padding:22px clamp(28px,3.2vw,46px) 32px;text-align:center;color:var(--pb-ink)}
.home .price-amount{margin:0;font-size:clamp(52px,4.8vw,70px);line-height:.9;letter-spacing:-.055em;color:var(--pb-ink)}
.price-per{margin:0;font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--pb-ink)}
.price-deal{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px clamp(24px,3.4vw,56px);padding:30px clamp(26px,3.4vw,52px) 40px}
.price-list{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.price-list li{display:flex;align-items:center;gap:13px;font-size:18px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.tick{flex:none;width:28px;height:28px;border-radius:50%;background:var(--site-accent,#FFCE55);box-shadow:0 3px 0 var(--site-action-lip,#BE8D19);position:relative}
.tick::after{content:"";position:absolute;left:10px;top:5px;width:6px;height:12px;border:solid var(--pb-ink);border-width:0 3px 3px 0;transform:rotate(45deg)}
.price-action{display:grid;justify-items:center;gap:12px;text-align:center}
.price-action p{margin:0;font-size:13px;line-height:1.5;color:var(--site-ink,#fff)}

/* Section heads */
.section-head{max-width:1296px;margin:0 auto 34px}
.section-head h2{font-size:clamp(42px,4.6vw,66px);line-height:1;letter-spacing:-.055em;margin:0}
.section-head p{max-width:60ch;margin:18px 0 0;font-size:19px;line-height:1.55;color:var(--home-muted)}

/* Step numbers shared by both step lists. */
.step-num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--home-ink);color:#fff;font-size:15px;font-weight:800;margin:0 0 14px}

/* How it works */
.home-how{padding:80px 5% 90px}
.home-how .section-head{text-align:center}
.how-steps{max-width:1296px;margin:0 auto;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.how-step{background:var(--home-surface);border-radius:30px;padding:22px 26px 30px;transition:transform .3s var(--home-ease),box-shadow .3s var(--home-ease)}
.how-step h3{font-size:25px;letter-spacing:-.035em;margin:0 0 10px}
.how-step p{font-size:17px;line-height:1.5;margin:0;color:var(--home-muted);max-width:32ch}
.how-art{height:clamp(250px,25vw,320px);margin:0 0 18px;display:grid;place-items:center;position:relative}
.how-art:not(.how-photos)>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform .5s var(--home-ease)}
.how-photos .photo{position:absolute;height:auto;object-fit:cover;border-radius:16px;border:5px solid #fff;box-shadow:0 10px 24px rgba(21,22,30,.14);transition:transform .45s var(--home-ease)}
.photo-face{width:42%;aspect-ratio:1;left:4%;top:12%;transform:rotate(-8deg)}
.photo-side{width:56%;aspect-ratio:560/380;left:22%;top:34%;z-index:2;transform:rotate(2deg)}
.photo-three{width:40%;aspect-ratio:1;right:3%;top:6%;transform:rotate(8deg)}

/* Sample guidebook */
.home-sample{max-width:1296px;margin:0 auto;padding:10px 5% 90px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center;box-sizing:content-box}
.sample-copy h2{font-size:clamp(42px,4.6vw,66px);line-height:1;letter-spacing:-.055em;margin:0}
.sample-copy p{max-width:40ch;margin:18px 0 28px;font-size:19px;line-height:1.55;color:var(--home-muted)}
.sample-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.sample-pages{isolation:isolate;position:relative;display:block;height:clamp(320px,34vw,470px);border-radius:32px;background:radial-gradient(circle at 50% 60%,var(--home-surface-2),#fff 70%)}
.sample-page{position:absolute;top:50%;left:50%;width:clamp(180px,19vw,262px);height:auto;border-radius:10px;box-shadow:0 2px 0 var(--home-line),0 22px 44px rgba(21,22,30,.16);transition:transform .5s var(--home-ease)}
.sample-page-1{z-index:1;transform:translate(-14%,-50%) rotate(9deg)}
.sample-page-2{z-index:2;transform:translate(-50%,-52%) rotate(1deg)}
.sample-page-3{z-index:3;transform:translate(-86%,-50%) rotate(-8deg)}

/* Ordering: one phone and four toy bricks. Each brick is a step; the yellow one
   is on the phone now. It moves on by itself (the bar along its foot is the
   timer, home-ordering.mjs) until the visitor picks a step. */
.home-ordering{max-width:1296px;margin:0 auto;padding:96px 5% 84px;box-sizing:content-box;display:grid;
  grid-template-columns:minmax(0,1.12fr) clamp(56px,8vw,128px) minmax(0,.88fr);
  grid-template-areas:"head head head" "sizes sizes sizes" "steps arrow stage" "note note note";align-items:center;column-gap:clamp(8px,1.6vw,24px)}
.home-ordering .section-head{grid-area:head;margin:0 0 30px;max-width:none}
.home-ordering .section-head h2{text-wrap:balance}
.home-ordering .brick-costs{grid-area:sizes;margin:0 0 56px}
.order-steps{--stud:15px;grid-area:steps;list-style:none;margin:0;padding:var(--stud) 0 0;display:grid;gap:5px}
.order-brick{--brick:var(--pb-blue);--lip:var(--pb-blue-lip);position:relative;display:flex;align-items:center;gap:16px;width:100%;box-sizing:border-box;margin:0;padding:15px 22px 24px;border:0;border-radius:18px;background:var(--brick);box-shadow:inset 0 -10px 0 var(--lip),0 10px 22px rgba(5,14,66,.22);color:var(--site-ink,#fff);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .45s var(--home-ease),background-color .3s,color .3s,box-shadow .3s}
.order-step:first-child .order-brick::before{content:"";position:absolute;left:22px;right:22px;bottom:calc(100% - 1px);height:var(--stud);background:linear-gradient(rgba(255,255,255,.34) 0 3px,transparent 3px),var(--brick);transition:background-color .3s;
  -webkit-mask:var(--stud-shape) 0 0/58px 100% space no-repeat;mask:var(--stud-shape) 0 0/58px 100% space no-repeat;
  --stud-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 15' preserveAspectRatio='none'%3E%3Cpath d='M7 15V5a4 4 0 0 1 4-4h36a4 4 0 0 1 4 4v10z'/%3E%3C/svg%3E")}
.order-brick .step-num{flex:none;margin:0;background:#fff;color:var(--pb-blue);transition:background-color .3s,color .3s}
.order-text{display:grid;gap:3px;min-width:0}
.order-text b{font-size:21px;font-weight:800;letter-spacing:-.03em;line-height:1.2}
.order-text span{font-size:16px;line-height:1.45;color:var(--site-muted,#DCE4FF);transition:color .3s}
/* The step on the phone: yellow, and pulled a little out of the wall. */
.order-step.is-on .order-brick{--brick:var(--site-accent,#FFCE55);--lip:var(--site-action-lip,#BE8D19);color:var(--pb-ink);transform:translateX(14px)}
.order-step.is-on .step-num{background:var(--pb-ink);color:var(--site-accent,#FFCE55)}
.order-step.is-on .order-text span{color:rgba(23,23,31,.78)}
.order-brick::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;border-radius:0 0 18px 18px;background:rgba(23,23,31,.3);transform:scaleX(0);transform-origin:0 50%}
.home-ordering[data-playing] .order-step.is-on .order-brick::after{animation:order-timer 4.2s linear forwards}
.order-steps:is(:hover,:focus-within) .order-brick::after{animation-play-state:paused}
@keyframes order-timer{to{transform:scaleX(1)}}
.order-brick:focus-visible{outline:3px solid var(--site-accent,#FFCE55);outline-offset:3px}
.order-step.is-on .order-brick:focus-visible{outline-color:#fff}

.order-arrow{grid-area:arrow;display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:var(--site-accent,#FFCE55);stroke-width:11;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 5px 0 rgba(5,14,66,.22))}

.order-stage{grid-area:stage;position:relative;justify-self:center;padding:26px 0}
.order-glow{position:absolute;left:50%;top:50%;width:190%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(144,177,255,.26),transparent 66%);pointer-events:none}
.phone{position:relative;margin:0;width:clamp(214px,20.5vw,286px);aspect-ratio:9/19.5;padding:8px;border-radius:40px;background:#15161E;box-shadow:0 30px 60px rgba(5,14,66,.45),inset 0 0 0 1px #555867}
.phone-screen{height:100%;display:grid;align-items:center;border-radius:32px;overflow:hidden;background:#fff;container-type:inline-size}
/* Every step's screen sits in the same place; only the one on show is seen. */
.phone-capture{grid-area:1/1;position:relative;width:100%;aspect-ratio:750/1290;opacity:0;transition:opacity .35s ease}
.phone-capture.is-on{opacity:1}
.phone-screen img{display:block;width:100%;height:auto}
/* Red rings mark the exact control to tap. */
.spot{position:absolute;border:3px solid var(--pb-red);border-radius:12px;box-shadow:0 0 0 4px rgba(255,72,54,.18);pointer-events:none}
.spot-round{width:17%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%)}
.spot::after{content:"";position:absolute;inset:-3px;border-radius:inherit;border:3px solid var(--pb-red);opacity:0}
.spot-pill{border-radius:999px}
/* Step 1 is our own guide: the pet in bricks, then a sheet with its parts file
   and the button to save it. The four dots are the four steps. Everything is
   sized from the phone's width (cqw), so it is the same picture at any size. */
.phone-app{align-self:stretch;aspect-ratio:auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;background:var(--site-canvas,#193BB5)}
.app-top{display:flex;align-items:center;justify-content:space-between;padding:32px 18px 0;padding:13cqw 7cqw 0}
.phone-screen .app-top img{width:34px;width:13.5cqw}
.app-dots{display:flex;align-items:center;gap:5px;gap:2cqw}
.app-dots i{width:7px;width:2.8cqw;aspect-ratio:1;border-radius:99px;background:rgba(255,255,255,.36)}
.app-dots i:first-child{width:18px;width:7cqw;aspect-ratio:auto;height:7px;height:2.8cqw;background:var(--site-accent,#FFCE55)}
.phone-screen .app-pet{align-self:center;justify-self:center;width:100%;scale:1.08;filter:drop-shadow(0 10px 12px rgba(5,14,66,.4))}
.file-card{box-sizing:border-box;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;gap:3.8cqw;padding:16px 16px 24px;padding:6.6cqw 6.2cqw 9.5cqw;border-radius:20px 20px 0 0;border-radius:8cqw 8cqw 0 0;background:#fff;box-shadow:0 -10px 24px rgba(5,14,66,.28);--home-muted:var(--pb-ink-muted);--home-surface:#F1F3FA;color:var(--pb-ink)}
.file-country{margin:0;display:inline-flex;align-items:center;gap:6px;gap:2.4cqw;justify-self:start;padding:6px 10px;padding:2.2cqw 3.8cqw;border-radius:999px;background:var(--home-surface);font-size:12px;font-size:4.5cqw;font-weight:800}
.file-dot{width:8px;width:3cqw;aspect-ratio:1;border-radius:50%;background:var(--pb-blue)}
.file-row{display:flex;align-items:center;gap:10px;gap:3.8cqw;padding:10px;padding:3.8cqw;border-radius:12px;border-radius:4.8cqw;background:var(--home-surface)}
.file-row b{display:block;font-size:12px;font-size:4.4cqw;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-row>span:last-child{min-width:0}
.file-row small{display:block;margin-top:2px;font-size:10.5px;font-size:3.8cqw;font-weight:600;line-height:1.35;color:var(--home-muted)}
/* The file is checked: a green tick on its corner. */
.file-icon{position:relative;flex:none;width:32px;width:12.4cqw;aspect-ratio:1;border-radius:9px;border-radius:3.4cqw;background:#fff;display:grid;place-items:center}
.file-icon svg{width:60%;height:60%;fill:none;stroke:var(--pb-blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.file-icon::after{content:"";position:absolute;right:-18%;bottom:-18%;width:46%;aspect-ratio:1;border-radius:50%;background:var(--pb-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/70% no-repeat;box-shadow:0 0 0 2px var(--home-surface)}
.file-action{position:relative;display:block}
.file-button{display:flex;align-items:center;justify-content:center;gap:6px;gap:2.2cqw;padding:11px;padding:4.3cqw;border-radius:12px;border-radius:4.6cqw;background:var(--site-accent,#FFCE55);color:var(--pb-ink);font-size:13px;font-size:5cqw;font-weight:800;box-shadow:0 3px 0 var(--site-action-lip,#BE8D19);box-shadow:0 1.2cqw 0 var(--site-action-lip,#BE8D19)}
.file-button svg{flex:none;width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.spot-button{inset:-7px -6px -9px;inset:-2.4cqw -2.2cqw -3.4cqw;border-radius:16px;border-radius:6.4cqw}
/* A few bricks on their way, around the phone. */
.loose-brick{--w:58px;position:absolute;left:var(--x);top:var(--y);width:var(--w);height:calc(var(--w)*.4);border-radius:5px;background:var(--c);box-shadow:inset 0 calc(var(--w)*-.09) 0 rgba(0,0,0,.2),0 12px 20px rgba(5,14,66,.3);rotate:var(--r)}
.loose-brick::before{content:"";position:absolute;left:8%;right:8%;bottom:calc(100% - 1px);height:calc(var(--w)*.13);background:linear-gradient(rgba(255,255,255,.34) 0 2px,transparent 2px),var(--c);
  -webkit-mask:var(--stud-shape) 0 0/50% 100% repeat-x;mask:var(--stud-shape) 0 0/50% 100% repeat-x;
  --stud-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 15' preserveAspectRatio='none'%3E%3Cpath d='M7 15V5a4 4 0 0 1 4-4h36a4 4 0 0 1 4 4v10z'/%3E%3C/svg%3E")}
.loose-brick-small{--w:40px}
.ordering-note{grid-area:note;margin:34px 0 0;font-size:12px;line-height:1.6;color:var(--home-muted)}

/* Closing band */
.home-start{max-width:1296px;margin:0 auto;padding:0 5% 88px;text-align:center}
.home-start .home-start-button{width:min(100%,680px);min-height:88px;padding:24px clamp(22px,4vw,48px);font-size:clamp(22px,3.4vw,38px);line-height:1.15;text-wrap:balance}
.home .site-footer{margin-top:48px}

/* Hover motion only where the pointer hovers and motion is welcome. */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .how-step:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(21,22,30,.07)}
  .how-step:hover .how-art:not(.how-photos)>img{transform:scale(1.04) rotate(-1deg)}
  .how-step:hover .photo-face{transform:translate(-8px,-6px) rotate(-12deg)}
  .how-step:hover .photo-side{transform:translateY(6px) rotate(0deg)}
  .how-step:hover .photo-three{transform:translate(8px,-6px) rotate(12deg)}
  .order-step:not(.is-on) .order-brick:hover{transform:translateX(6px)}
  .sample-pages:hover .sample-page-1{z-index:1;transform:translate(-6%,-50%) rotate(13deg)}
  .sample-pages:hover .sample-page-2{z-index:2;transform:translate(-50%,-56%) rotate(0deg)}
  .sample-pages:hover .sample-page-3{z-index:3;transform:translate(-94%,-50%) rotate(-12deg)}
  .home-top .brand:hover img{transform:rotate(-8deg) scale(1.06)}
}

/* Reveal on scroll (only when the motion script is running). */
html.motion [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--home-ease),transform .7s var(--home-ease);transition-delay:calc(var(--i,0)*90ms)}
html.motion [data-reveal].is-in{opacity:1;transform:none}
html.motion .price-list li{opacity:0;transform:translateX(-10px);transition:opacity .5s var(--home-ease),transform .5s var(--home-ease);transition-delay:calc(220ms + var(--i,0)*110ms)}
html.motion .is-in .price-list li{opacity:1;transform:none}
/* The price brick drops in and clicks into place beside the other one. */
html.motion .price-tag{opacity:0;transform:translateY(-54px) rotate(-5deg);transition:transform .7s cubic-bezier(.3,1.5,.5,1) .2s,opacity .2s ease .2s}
html.motion .is-in .price-tag{opacity:1;transform:none}
html.motion .is-in .tick{animation:home-pop .5s var(--home-ease) both;animation-delay:inherit}
html.motion .phone-capture.is-on .spot::after{animation:home-ring 2s ease-out .5s infinite}
html.motion .phone-capture.is-on .spot:not(.spot-round)::after{inset:0;border:0;opacity:1;animation-name:home-glow}
html.motion .loose-brick{animation:home-bob 5s ease-in-out var(--d) infinite}
@keyframes home-pop{0%{transform:scale(.4)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes home-ring{0%{opacity:.7;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.45)}}
@keyframes home-glow{0%{box-shadow:0 0 0 3px rgba(255,72,54,.6)}70%,100%{box-shadow:0 0 0 14px rgba(255,72,54,0)}}
@keyframes home-bob{0%,100%{translate:0 0}50%{translate:0 -10px}}


/* Brick sizes and their estimated parts costs, before the ordering steps. */
.brick-costs{display:grid;grid-template-columns:1fr;gap:18px clamp(24px,4vw,56px);align-items:center;margin-top:64px;padding:0;text-align:center}
.costs-copy h3{margin:0 0 8px;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.035em;line-height:1.1}
.costs-copy p{margin:0;font-size:16px;line-height:1.5;color:var(--home-muted)}
.cost-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.cost-card{box-sizing:border-box;display:grid;gap:2px;align-content:start;justify-items:center;min-width:0;padding:18px clamp(8px,1.4vw,18px) 16px;border-radius:22px;background:var(--home-surface);transition:transform .3s var(--home-ease),box-shadow .3s var(--home-ease)}
.cost-card b{font-size:17px;letter-spacing:-.01em}
.cost-height,.cost-count{font-size:14px;color:var(--home-muted)}
.cost-count{display:flex;align-items:center;justify-content:center;min-height:3em;line-height:1.5}
.cost-price{margin-top:8px;font-size:clamp(18px,1.9vw,26px);font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap}
.cost-stack{display:flex;flex-direction:column-reverse;align-items:center;gap:4px;width:43px;height:84px;margin-bottom:12px}
.cost-stack i{position:relative;display:block;width:34px;height:12px;border-radius:3px;background:var(--pb-blue);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.cost-stack i:nth-child(even){margin-left:9px}
.cost-stack i::before,.cost-stack i::after{content:"";position:absolute;top:-4px;width:8px;height:4px;border-radius:2px 2px 0 0;background:inherit}
.cost-stack i::before{left:5px}.cost-stack i::after{right:5px}
.cost-stack i:nth-child(2){background:var(--pb-yellow)}
.cost-stack i:nth-child(3){background:var(--pb-red)}
.cost-stack i:nth-child(4){background:#1F9D55}
.cost-stack i:nth-child(5){background:var(--pb-blue)}
.costs-note{grid-column:1/-1;margin:0;font-size:13px;line-height:1.5;color:var(--home-muted)}
@media(hover:hover){.cost-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(21,22,30,.08)}}
html.motion .brick-costs .cost-stack i{transform:translateY(-26px);opacity:0;transition:transform .5s cubic-bezier(.3,1.5,.5,1),opacity .25s}
html.motion .brick-costs.is-in .cost-stack i{transform:none;opacity:1;transition-delay:calc(.3s + var(--r) * .14s)}

.home-top nav .nav-faq{margin-right:4px}

@media(max-width:1000px){
  .price-deal{grid-template-columns:1fr;justify-items:start}
  .brick-costs{grid-template-columns:1fr}
  .cost-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cost-card:last-child{grid-column:1/-1}
  .home-faq{grid-template-columns:1fr}
  .faq-head{position:static}
  .how-steps{gap:14px}
  .how-step{padding:18px 20px 24px}
  .how-step h3{font-size:22px}
  .how-step p{font-size:16px}
  .home-sample{grid-template-columns:1fr}
  .sample-copy{text-align:center}
  .sample-copy p{margin-inline:auto}
  .sample-actions{justify-content:center}
}
/* Two columns on phones/tablets, one row on desktop. */
@media(max-width:600px){
  .cost-cards{gap:10px}
}
@media(max-width:700px){
  .brick-costs{margin-top:64px;gap:24px}
  .home-faq{grid-template-columns:1fr;padding:88px 20px 48px;gap:32px}
  .faq-head{position:static}
  .faq-answer{padding-right:8px}
  .home .home-top{position:relative;padding:14px 20px;flex-wrap:nowrap;gap:12px}
  .home .home-top nav{flex-wrap:nowrap;gap:16px;white-space:nowrap}
  .home-top nav .pb-button{display:none}
  .home-top[data-scrolled]{padding-top:10px;padding-bottom:10px}
  .home-top .brand{font-size:21px}
  .home-top .brand img{width:34px}
  .home-top nav .small{display:none}
  .home-hero{padding:48px 20px 56px;gap:32px}
  .home-hero h1{font-size:clamp(50px,13.4vw,70px);margin-bottom:40px}
  .hero-sub{max-width:31em;font-size:16px}
  /* Phones: the price brick sits on top of the other one, on its studs. */
  .home-price{padding:0 16px 24px}
  .price-card{grid-template-columns:1fr;gap:0}
  .price-tag{grid-auto-flow:column;justify-content:center;align-items:baseline;gap:10px;padding:20px 26px 28px;margin-inline:22px}
  .home .price-amount{font-size:50px}
  .price-deal{grid-template-columns:1fr;justify-items:stretch;gap:26px;padding:28px 22px 36px}
  .price-action .pb-button{width:100%}
  .price-list li{font-size:17px}
  .home-how{padding:88px 20px 88px}
  .home-sample{grid-template-columns:1fr;padding:0 20px 32px;gap:36px}
  .sample-copy p{font-size:17px}
  .sample-actions .pb-button{width:100%}
  .sample-pages{height:330px}
  .sample-page{width:clamp(120px,31vw,168px)}
  .section-head{margin-bottom:36px}
  .section-head p{font-size:17px}
  .how-steps{grid-template-columns:1fr;gap:24px}
  .how-step{padding:24px 22px 30px}
  .how-art{height:300px}
  /* Phones: the phone first, then the bricks to tap. */
  .home-ordering{padding:88px 20px 56px;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "sizes" "stage" "steps" "note"}
  .home-start{padding:0 20px 72px}
  .order-arrow{display:none}
  .order-stage{padding:8px 0 34px}
  .phone{width:min(58vw,236px);border-radius:34px}
  .phone-screen{border-radius:26px}
  .order-brick{padding:14px 16px 23px;gap:13px}
  .order-step.is-on .order-brick{transform:none}
  .order-text b{font-size:19px}
  .order-text span{font-size:15px}
}
@media(max-width:380px){
  .home .home-top{padding-inline:16px;gap:10px}
  .home .home-top .brand{font-size:18px;gap:6px}
  .home .home-top .brand img{width:28px;height:auto}
  .home .home-top nav{font-size:14px;gap:12px}
}
@media(prefers-reduced-motion:reduce){
  html.motion .brick-costs .cost-stack i{transform:none;opacity:1;transition:none}
  .faq-item::details-content{transition:none}
  html.motion [data-reveal],html.motion .price-list li,html.motion .price-tag{opacity:1;transform:none;transition:none}
  html.motion .is-in .tick,html.motion .phone-capture.is-on .spot::after,html.motion .loose-brick{animation:none}
}

/* Live examples keep the artwork's room reserved, including before JS loads. */
.how-demo-viewport{position:absolute;inset:0;cursor:grab;outline-offset:-4px;opacity:0;border-radius:14px}
.how-demo-viewport:active{cursor:grabbing}
.how-demo[data-how-bricks] .how-demo-viewport{bottom:68px}
.how-demo[data-state=ready] .how-demo-viewport{opacity:1}
.how-demo[data-state=ready]>img{visibility:hidden}
.how-demo-rotate{position:absolute;right:0;top:0;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.4);border-radius:50%;background:var(--site-canvas);color:var(--site-ink);font:inherit;font-size:22px;font-weight:700;line-height:1;cursor:pointer}
.how-demo-rotate[hidden]{display:none}
.how-demo-controls{position:absolute;inset:auto 0 0;display:grid;grid-template-rows:44px auto;height:64px;visibility:hidden}
.how-demo[data-state=ready] .how-demo-controls{visibility:visible}
.how-demo-controls input{width:100%;min-width:0;height:44px;margin:0;accent-color:var(--site-accent);cursor:pointer;touch-action:pan-y}
.how-demo-size-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center;font-size:14px;line-height:1.25;color:var(--site-muted)}
.how-demo-size-labels span{min-width:0}
.how-demo-size-labels .is-selected{color:var(--site-accent)}
.how-demo-size-labels span:first-child{text-align:left}
.how-demo-size-labels span:last-child{text-align:right}

.how-demo-controls input:focus-visible{outline-offset:-4px}

/* The number and title form one heading row in both step sequences. */
.step-heading{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.step-heading .step-num{flex:none;margin:0}
.home .step-heading h3{min-width:0;margin:0}

.home .faq-action{display:block}
.home .faq-action .price-card{width:100%}