:root{--ground:#f6e3da;--tile:#fbf1ec;--tile-2:#f0d4c6;--tile-3:#e8c3b1;--blue:#dfe7f1;--blue-2:#c9d6e6;--ink:#111;--white:#fff;--r:8px;--gap:8px;--m:clamp(16px,1.6vw,24px);--s-xl:clamp(40px,5.4vw,84px);--s-l:clamp(26px,2.6vw,40px);--s-m:clamp(20px,1.6vw,24px);--s-b:17px;--s-s:14px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 var(--s-b)/1.55 Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}a{color:inherit}h1,h2,h3,p,ul,ol{margin:0}ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:var(--r);z-index:10;text-decoration:none}.skip:focus{top:12px}
.board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding:0 var(--m)}
.t{background:var(--tile);border-radius:var(--r);padding:24px;position:relative;overflow:hidden;min-width:0}
.t-ink{background:var(--ink);color:var(--white)}.t-blue{background:var(--blue)}.t-dark{background:var(--tile-2)}
.photo{padding:0;margin:0}.photo img{width:100%;height:100%;object-fit:cover}
.top{padding-top:var(--m)}
.band{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 28px}
.band img{height:30px;width:auto}
.mini{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.mini a{text-decoration:none;font-weight:500;padding:10px 14px;border-radius:999px;transition:background .2s}
.mini a:hover{background:var(--white)}
.mini .go{background:var(--ink);color:var(--white)}.mini .go:hover{background:#000}
.crumbs{margin-top:20px}.crumbs p{grid-column:1/-1;font-size:var(--s-s);padding:0 4px}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.hero{margin-top:12px}
.lead{grid-column:1/7;grid-row:span 2;display:flex;flex-direction:column;gap:20px;padding:clamp(24px,3vw,44px);min-height:460px}
.lead h1{font-size:var(--s-xl);line-height:1;letter-spacing:-.04em;font-weight:700}
.lead p{font-size:var(--s-m);line-height:1.4;max-width:30ch}
.btn{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:14px;background:var(--ink);color:var(--white);text-decoration:none;font-weight:600;padding:16px 22px;border-radius:var(--r);transition:background .2s,transform .15s}
.btn:hover{background:#000}.btn:active{transform:scale(.98)}.btn svg{width:22px;height:22px}
.hero .photo{grid-column:7/13;min-height:320px}
.price{grid-column:7/13;display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.price .amt{font-size:var(--s-l);font-weight:700;letter-spacing:-.03em}.price .amt small{font-size:var(--s-s);font-weight:500;letter-spacing:0}
.sec{margin-top:clamp(80px,9vw,150px)}
.why h2{grid-column:1/6;font-size:var(--s-l);line-height:1.08;letter-spacing:-.03em;font-weight:700;padding:0 4px}
.why .copy{grid-column:7/13;max-width:62ch}
.why .pic{grid-column:span 4;aspect-ratio:4/3;margin-top:40px}
.pic figcaption{position:absolute;left:12px;bottom:12px;background:var(--tile);border-radius:6px;padding:4px 10px;font-size:var(--s-s)}
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}.js .rv.in{opacity:1;transform:none}
.hero .photo img{animation:drift 22s ease-in-out infinite alternate}@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.08) translateX(-1.5%)}}
.steps li{transition:transform .25s}.steps li:hover{transform:translateY(-4px)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes pop{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
.js .top .band{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}.js .crumbs p{animation:rise .6s cubic-bezier(.2,.7,.2,1) .08s both}
.js .hero .lead.rv{opacity:1;transform:none;animation:rise .8s cubic-bezier(.2,.7,.2,1) .12s both}.js .hero .photo{animation:pop 1s cubic-bezier(.2,.7,.2,1) .2s both}.js .hero .price{animation:rise .7s cubic-bezier(.2,.7,.2,1) .36s both}
.js .hero .lead h1,.js .hero .lead p,.js .hero .lead .btn{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}.js .hero .lead p{animation-delay:.28s}.js .hero .lead .btn{animation-delay:.4s}
.qs details[open] .a{animation:rise .4s cubic-bezier(.2,.7,.2,1) both}
.why .pic img{transform:translateY(var(--py,0)) scale(1.1)}
.more a,.foot a,.crumbs a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .2s}.more a:hover,.foot a:hover,.crumbs a:hover{text-decoration-color:currentColor}
.inc .list li{transition:transform .25s}.inc .list li:hover{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}.js .rv{opacity:1;transform:none}.hero .photo img{animation:none}.why .pic img{transform:none}}.why .copy p+p{margin-top:16px}
.span{grid-column:1/-1;font-size:var(--s-l);line-height:1.08;letter-spacing:-.03em;font-weight:700;padding:0 4px;margin-bottom:12px}
.inc .list{grid-column:1/6}.inc .list li{font-size:var(--s-m);font-weight:500;line-height:1.35;padding:6px 0}
.inc .fit-a{grid-column:6/13;grid-row:2}.inc .fit-b{grid-column:6/13;grid-row:3}
.inc .list{grid-row:2/4}
.fit h3{font-size:var(--s-m);font-weight:700;margin-bottom:10px}.fit li{padding:4px 0}
.steps .row{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap)}
.steps li{min-height:220px;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.steps b{font-size:var(--s-m)}
.s1{background:#111;color:#fff}.s2{background:#3b302b;color:#fff}.s3{background:#b98d7a}.s4{background:#e3bba9}.s5{background:#f3d9cd}
.faq{align-items:start}.faq h2{grid-column:1/5;font-size:var(--s-l);letter-spacing:-.03em;font-weight:700;padding:0 4px}
.qs{grid-column:5/13;display:grid;gap:var(--gap)}
.qs details{background:var(--tile);border-radius:var(--r);transition:background .25s}
.qs details[open]{background:var(--ink);color:var(--white)}
.qs summary{list-style:none;cursor:pointer;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 24px;font-size:var(--s-m);font-weight:500;line-height:1.3}
.qs summary::-webkit-details-marker{display:none}
.plus{position:relative;flex:0 0 16px;height:16px}
.plus::before,.plus::after{content:"";position:absolute;left:0;top:6.5px;width:16px;height:3px;background:currentColor;border-radius:2px;transition:transform .25s}
.plus::after{transform:rotate(90deg)}details[open] .plus::after{transform:rotate(0)}
.qs .a{padding:0 24px 24px;max-width:58ch}
.end .cta{grid-column:1/9;min-height:280px;background:var(--ink);color:var(--white);text-decoration:none;display:flex;flex-direction:column;gap:14px;transition:background .2s}
.end .cta:hover{background:#000}.end .cta .big{font-size:var(--s-l);font-weight:700;letter-spacing:-.03em}
.end .cta span:not(.big){max-width:40ch}
.end .cta svg{width:36px;height:36px;margin-top:auto;align-self:flex-end;transition:transform .25s}.end .cta:hover svg{transform:translate(3px,-3px)}
.end .more{grid-column:9/13;background:var(--blue)}.more .h3{font-size:var(--s-m);font-weight:700;margin-bottom:10px}
.more li{padding:4px 0}.more a{text-decoration:none;font-weight:500}.more a:hover{text-decoration:underline}
.foot{margin:var(--gap) 0 var(--m);padding-top:0}
.foot .mark{grid-column:1/6;display:flex;align-items:center;justify-content:center;min-height:200px}.foot .mark img{width:min(70%,360px)}
.foot .info{grid-column:6/13;display:flex;flex-direction:column;gap:12px;justify-content:space-between}
.foot .info p:first-child{font-size:var(--s-m);font-weight:500;line-height:1.35}.foot small{font-size:var(--s-s)}
@media (max-width:1000px){.why .copy,.lead p,.qs .a{max-width:none}.lead,.hero .photo,.price{grid-column:1/-1}.lead{min-height:0;grid-row:auto}.hero .photo{aspect-ratio:16/9;min-height:0}
.why h2,.why .copy{grid-column:1/-1}.why .copy{margin-top:16px}
.inc .list,.inc .fit-a,.inc .fit-b{grid-column:1/-1;grid-row:auto}
.steps .row{grid-template-columns:1fr 1fr}.steps li{min-height:150px}.steps .s5{grid-column:1/-1}
.faq h2,.qs{grid-column:1/-1}.faq h2{margin-bottom:16px}
.end .cta{grid-column:1/8}.end .more{grid-column:8/13}.foot .mark,.foot .info{grid-column:1/-1}.why .pic{grid-column:span 4;margin-top:24px}}
@media (max-width:640px){:root{--gap:6px;--s-b:16px}.board{grid-template-columns:repeat(2,minmax(0,1fr))}
.band{padding:16px 18px}.band img{height:24px}.mini a:not(.go){display:none}
.lead{padding:22px}.lead h1{font-size:clamp(32px,9.4vw,44px)}
.qs summary{font-size:18px;padding:16px 20px;min-height:64px}.qs .a{padding:0 20px 20px}
.steps .row{grid-template-columns:1fr}.steps li{min-height:0}.end .cta,.end .more{grid-column:1/-1}.why .pic{grid-column:1/-1}.why .pic:nth-of-type(n+2){grid-column:span 1;aspect-ratio:1}}
