/* Landing page. Design numbers are the 1440 and 390 FigCraft frames; --k (set in shell.js) scales the scenes. */
.wrap-m{width:min(1200px,100% - 40px);margin-inline:auto}
body.landing{background:#fff}

/* ---------- Hero ---------- */
.hero{position:relative;height:calc(min(100vw,1440px) * .8333);min-height:560px;overflow:hidden;
  background:linear-gradient(180deg,#4F9BE6 0%,#86C0F0 25%,#CBE5F9 50%,#E8F1FE 75%,#E8F1FE 100%)}
.hero-sky{position:absolute;inset:0}
.wall-wrap{position:absolute;inset:0;pointer-events:none}
.wall{position:absolute;left:50%;top:0;translate:-50% 0}
.wall-d{width:min(100vw,1440px);height:calc(min(100vw,1440px) * .8333)}
.wall-m{display:none}
.wall .row{position:absolute;inset:0;animation:drift 38s ease-in-out infinite alternate;will-change:transform}
.wall .row:nth-child(even){animation-duration:46s}
@keyframes drift{from{transform:translate3d(calc(var(--dir) * -14px),0,0)}to{transform:translate3d(calc(var(--dir) * 14px),0,0)}}
.wall .t{position:absolute;display:block;background-size:cover;background-position:center;background-color:#cfe0f2}
.js .wall .t{animation:tile-in 1s var(--ease) both;animation-delay:calc(var(--d) * 1ms + 250ms)}
@keyframes tile-in{from{opacity:0;transform:translate3d(0,26px,0) scale(.97)}to{opacity:1;transform:none}}
.t.h01{background-image:url(../assets/img/h01.webp)}.t.h02{background-image:url(../assets/img/h02.webp)}.t.h03{background-image:url(../assets/img/h03.webp)}
.t.h04{background-image:url(../assets/img/h04.webp)}.t.h05{background-image:url(../assets/img/h05.webp)}.t.h06{background-image:url(../assets/img/h06.webp)}
.t.h07{background-image:url(../assets/img/h07.webp)}.t.h08{background-image:url(../assets/img/h08.webp)}.t.h09{background-image:url(../assets/img/h09.webp)}
.t.h10{background-image:url(../assets/img/h10.webp)}.t.h11{background-image:url(../assets/img/h11.webp)}.t.h12{background-image:url(../assets/img/h12.webp)}
.t.h13{background-image:url(../assets/img/h13.webp)}.t.h14{background-image:url(../assets/img/h14.webp)}.t.h15{background-image:url(../assets/img/h15.webp)}
/* Light-blue gaps between tiles: the sky shows through; fades blend the wall into sky above and pale blue below. */
.hero-fade-top{position:absolute;left:0;right:0;top:27.5%;height:15.8%;background:linear-gradient(180deg,#86C0F0,rgba(134,192,240,0));pointer-events:none}
.hero-fade-bottom{position:absolute;left:0;right:0;top:68%;bottom:0;background:linear-gradient(180deg,rgba(232,241,254,0),#E8F1FE 78%);pointer-events:none}
.hero-copy{position:absolute;left:50%;translate:-50% 0;top:calc(min(100vw,1440px) * .118);color:#fff;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.hero-copy .h-hero{font-size:clamp(40px,5vw,72px);max-width:12em}
.ln{display:block;overflow:hidden;padding:0 .1em .14em 0;margin-bottom:-.14em}
.js .ln>span{display:inline-block;transform:translateY(112%);animation:line-up 1s var(--ease) forwards}
.js .ln:nth-child(1)>span{animation-delay:.2s}.js .ln:nth-child(2)>span{animation-delay:.34s}
@keyframes line-up{to{transform:none}}
.hero-desc{max-width:360px;text-wrap:balance;margin-top:clamp(24px,3.4vw,48px);font-size:clamp(14px,1.1vw,16px);line-height:1.5;color:#fff;opacity:0;animation:fade-in .9s .7s var(--ease) forwards}
@keyframes fade-in{to{opacity:1}}
.hero-cta{position:absolute;left:0;right:0;bottom:clamp(18px,2.8vw,40px);z-index:3;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 44px;text-align:center;padding-inline:20px}
.js .hero-cta{opacity:0;animation:fade-in .9s 1s var(--ease) forwards}
.hero-cta .trust{flex:0 0 100%;margin-top:16px;font-size:13px;font-weight:500;color:var(--text-5)}
.hero-cta .trust-m{display:none}
.hero .btn{min-width:127px}

/* ---------- Ramp: one continuous background under the sections after the hero ---------- */
/* Each landing section owns its background tone (a top and a bottom tone), so no tone depends on the page height. The seam to the previous section is a soft fade painted by the section itself (--prev fading into its own tone over --seam), never a global percentage. */
.ramp{position:relative;background:#fff}
.ramp>section{--seam:220px;position:relative;isolation:isolate;background:linear-gradient(180deg,var(--ta,#fff),var(--tb,#fff))}
.ramp>section::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--seam);z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--prev,transparent),transparent)}
.showcase{--ta:#E8F1FE;--tb:#fff;--prev:#E8F1FE}
.meja{--ta:#F4EEE1;--tb:#F4EEE1;--prev:#fff}
.bsx{--ta:#EEF3FB;--tb:#EEF3FB;--prev:#F4EEE1}
.fitur{--ta:#F2F7FF;--tb:#fff;--prev:#EEF3FB}
.aturan{--ta:#fff;--tb:#F2F7FE;--prev:#fff}
.faq{--ta:#F2F7FE;--tb:#fff;--prev:#F2F7FE}

/* ---------- Showcase 01 ---------- */
.showcase{padding-top:clamp(64px,8.8vw,127px);padding-bottom:clamp(32px,4vw,56px);overflow:hidden;text-align:center}
.sc-copy{position:relative}
.sc-title{font-size:clamp(38px,4.7vw,68px);line-height:1.08;letter-spacing:-.035em}
.sc-title .l1,.sc-title .l2,.sec-head .l1,.sec-head .l2{display:block}
.sc-copy .lead{max-width:640px;margin:20px auto 0;font-size:clamp(15px,1.3vw,18px)}
.actions{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.actions.center,.sc-copy .actions{justify-content:center}
.sc-copy .actions{margin-top:28px}
/* Showcase: the phone is shown whole, the two other themes sit beside it on a grid, each with its own "Lihat di HP" cue underneath. Nothing overlaps. */
.sc-stage{padding-bottom:clamp(8px,2vw,24px)}

/* ---------- Meja undangan ---------- */
.meja{padding-top:clamp(64px,9vw,128px);padding-bottom:28px}
.meja-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:28px}
.linen{position:relative;height:calc(783px * var(--k) + 120px);margin-top:0}
.linen-bg{position:absolute;inset:0 0 70px;background:#F1EBDD url(../assets/img/linen-desktop.webp) center/cover;-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
.linen .slider-track{position:absolute;inset:0 0 70px;gap:0;padding-inline:calc(50% - 300px * var(--k));align-items:flex-start}
.linen .slider-arrow{top:calc(783px * var(--k) / 2 - 24px);margin-top:0}
.linen .slider-arrow.prev{left:calc(48px * var(--k))}.linen .slider-arrow.next{right:calc(100px * var(--k))}
.mj-item{position:relative;width:calc(600px * var(--k));height:calc(740px * var(--k));margin-top:calc(60px * var(--k));transform:scale(.9);transform-origin:50% 40%;opacity:.68;filter:saturate(.78);transition:transform .6s var(--spring),opacity .5s,filter .5s}
.mj-item.is-active{transform:translateY(-12px) scale(1);opacity:1;filter:none;z-index:2}
.mj-item>img,.mj-item .front{position:absolute}
.mj-item img{height:auto}
/* The exported SVGs carry a drop shadow, so their box is not centred on the card: nudge back by the measured offset. */
.mj-item>img,.mj-item .front{translate:calc(-15px * var(--k)) calc(32px * var(--k))}
.mj-item .front{display:block;transition:transform .6s var(--spring),rotate .7s var(--spring),filter .5s}
.mj-item.is-active .front{filter:drop-shadow(0 22px 26px rgba(60,40,20,.28))}
.mj-item[data-theme=melati].is-active .front{rotate:-6deg}.mj-item[data-theme=garis].is-active .front{rotate:4deg}.mj-item[data-theme=kawung].is-active .front{rotate:3deg}
.mj-item .front img{width:100%}
.mj-item:hover .front{transform:translateY(-5px)}
/* Exported art already carries its tilt and shadow; positioned by the centre each piece has in the design (px at 1440, scaled by --k). */
.mj-item[data-theme=melati] .front{left:calc(61.2px * var(--k));top:calc(29.9px * var(--k));width:calc(476.504px * var(--k))}
.mj-item[data-theme=melati] .back{left:calc(-63.3px * var(--k));top:calc(94.5px * var(--k));width:calc(336.599px * var(--k))}
.mj-item[data-theme=melati] .env{left:calc(25.3px * var(--k));top:calc(390.3px * var(--k));width:calc(389.418px * var(--k))}
.mj-item[data-theme=garis] .front{left:calc(137.2px * var(--k));top:calc(115.3px * var(--k));width:calc(325.52px * var(--k))}
.mj-item[data-theme=garis] .back{left:calc(251.8px * var(--k));top:calc(82.2px * var(--k));width:calc(346.371px * var(--k))}
.mj-item[data-theme=garis] .env{left:calc(9.9px * var(--k));top:calc(392.0px * var(--k));width:calc(386.139px * var(--k))}
.mj-item[data-theme=kawung] .front{left:calc(129.8px * var(--k));top:calc(108.9px * var(--k));width:calc(340.398px * var(--k))}
.mj-item[data-theme=kawung] .back{left:calc(251.8px * var(--k));top:calc(92.2px * var(--k));width:calc(346.371px * var(--k))}
.mj-item[data-theme=kawung] .env{left:calc(-2.3px * var(--k));top:calc(395.5px * var(--k));width:calc(398.63px * var(--k))}
.mj-item .only-print{position:absolute;left:calc(210px * var(--k));top:calc(167px * var(--k));padding:5px 12px;border-radius:14px;background:#EEF1F5;font-size:13px;font-weight:600;color:var(--text-3);rotate:-3deg;z-index:2}
.mj-item .tip{position:absolute;left:calc(175px * var(--k));top:calc(560px * var(--k));width:calc(250px * var(--k));min-width:210px;padding:16px 18px;border-radius:18px;background:#fff;box-shadow:var(--shadow-soft);text-align:left;display:flex;flex-direction:column;gap:2px;opacity:0;translate:0 10px;transition:opacity .45s var(--ease),translate .55s var(--ease);pointer-events:none}
.mj-item .tip::before{content:"";position:absolute;left:50%;top:-8px;width:20px;height:10px;margin-left:-10px;background:#fff;clip-path:polygon(50% 0,100% 100%,0 100%)}
.mj-item.is-active .tip{opacity:1;translate:0 0;pointer-events:auto}
.tip strong{font-size:16px}.tip span{font-size:13px;color:var(--text-3);line-height:1.45}.tip .link-arrow{font-size:13px;min-height:32px}
.linen .geser,.bawa-wrap .geser{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-size:14px;font-weight:600;box-shadow:var(--shadow-soft)}
.linen .geser{position:absolute;right:calc(77px * var(--k));top:calc(710px * var(--k));z-index:4;transition:opacity .4s}
.geser .arr{color:#8EC1FF}
.linen .progress{position:absolute;left:0;right:0;bottom:0}
.linen .progress button{min-width:min(140px,26vw)}


/* ---------- Video ---------- */
.video{padding-block:clamp(48px,7vw,100px)}
.video-grid{display:grid;grid-template-columns:minmax(0,470px) 1fr;gap:clamp(32px,6vw,90px);align-items:start}
.video-text .h-sec{font-size:clamp(38px,4.2vw,60px);line-height:1.08;letter-spacing:-.035em}
.video-text .l1{display:block}.video-text .accent{display:block;margin-top:2px}
.video-text .body-m{margin-top:24px}
.video-text .body-m+.body-m{margin-top:20px}
.video-art{display:flex;flex-direction:column;gap:56px}
.flow{display:flex;align-items:flex-start;gap:clamp(12px,2.4vw,34px)}
.flow>img{height:auto;flex:none;width:clamp(100px,10vw,141px)}
.flow>img[alt*=Pita]{width:clamp(76px,7.4vw,106px)}
.flow .next{align-self:center;display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:var(--shadow-soft);color:var(--text-3);font-style:normal;font-size:20px}
.vcard{position:relative;container-type:inline-size;width:clamp(200px,17.2vw,247px);aspect-ratio:247/439;border-radius:22px;background:#FBEEE0;box-shadow:0 2px 6px rgba(70,40,20,.08),0 28px 56px rgba(70,40,20,.16);overflow:hidden;flex:none}
.g-video .vcard{width:281px}
.vc-cover{width:100%}
.vc-tag{position:absolute;left:4cqw;top:4cqw;z-index:3;padding:1.4cqw 3cqw;border-radius:99px;background:#fff;font-size:3.6cqw;font-weight:600;color:var(--ink)}
.vc-play{position:absolute;left:38.9cqw;top:77cqw;z-index:3;display:grid;place-items:center;width:21.4cqw;height:21.4cqw;border-radius:50%;background:#fff;color:#B4553A;box-shadow:0 2cqw 6cqw rgba(70,40,20,.22);transition:transform .3s var(--spring)}
.vc-play svg{width:46%}.vc-play:hover{transform:scale(1.08)}
.vc-photos{position:absolute;left:5.3cqw;right:5.3cqw;top:118.6cqw;display:flex;gap:3cqw}
.vc-photos img{width:28cqw;aspect-ratio:69/84;object-fit:cover;border-radius:2.8cqw;box-shadow:0 1cqw 2cqw rgba(70,40,20,.15);transition:opacity .5s var(--ease),transform .6s var(--spring)}
.vc-photos img:nth-child(2){transform-origin:50% 100%}
.vc-bar{position:absolute;left:7.3cqw;right:7.3cqw;top:162cqw;height:1.2cqw;border-radius:2px;background:rgba(20,24,29,.18);overflow:hidden}
.vc-bar i{position:absolute;inset:0;background:#B4553A;transform-origin:left;transform:scaleX(var(--p,.4))}
.vc-t0,.vc-t1{position:absolute;top:166cqw;font-size:3.6cqw;font-weight:500;color:#6B4A3A}.vc-t0{left:7.3cqw}.vc-t1{right:7.3cqw}
.vcard .strip-pop{position:absolute;left:50%;top:22cqw;width:38cqw;translate:-50% 0;opacity:0;transform:translateY(10px) scale(.9);transition:opacity .5s var(--ease),transform .6s var(--spring);z-index:2;pointer-events:none}
/* Play states, driven by js/vcard.js */
.js .vcard[data-vcard=live] .vc-photos img{opacity:0;transform:translateY(14px) scale(.9)}
.js .vcard[data-vcard=live].s1 .vc-photos img:nth-child(1),.js .vcard[data-vcard=live].s2 .vc-photos img:nth-child(2),.js .vcard[data-vcard=live].s3 .vc-photos img:nth-child(3){opacity:1;transform:none}
.js .vcard[data-vcard=live] .vc-cover{transition:transform .8s var(--ease),opacity .6s}
.js .vcard[data-vcard=live].s4 .vc-play{opacity:.0;transform:scale(.6)}
.js .vcard[data-vcard=live].s4 .strip-pop{opacity:1;transform:none}
.js .vcard[data-vcard=live].reset .vc-cover,.js .vcard[data-vcard=live].reset .vc-photos{opacity:0}
.phones{display:flex;gap:clamp(16px,4vw,56px)}
.phones li{display:flex;flex-direction:column;align-items:center;gap:20px;font-size:13px;font-weight:500;color:var(--text-3);text-align:center}
.phones img{height:auto;width:clamp(100px,9vw,129px)}

/* ---------- Bawa pulang ---------- */
.bawa{padding-block:clamp(40px,6vw,88px)}
.bawa-wrap{position:relative}
.bawa-grid{display:grid;grid-template-columns:281px 241px 161px 161px;justify-content:space-between;align-items:start;gap:40px 24px;overflow:visible;scroll-snap-type:none;cursor:default}
.bawa-grid>li{scroll-snap-align:none}
.bawa-grid li img{height:auto;max-width:none}
.g-gif,.g-wall,.g-ai{margin-top:0}
.bawa-grid .g-gif{grid-column:1}
.bawa-grid .g-wall{grid-column:2/4}
.bawa-grid .g-ai{grid-column:4/5;justify-self:end}
.bawa-wrap .geser{display:none}

/* ---------- Fitur ---------- */
.fitur{padding-block:clamp(48px,7vw,100px) clamp(40px,6vw,80px)}
.gratis{margin-top:-20px;margin-bottom:24px;font-size:18px;font-weight:600}
.feat{display:grid;align-items:center;gap:clamp(32px,6vw,80px);margin-top:clamp(56px,8vw,112px)}
.feat.f1{grid-template-columns:minmax(0,440px) 1fr}
.feat.f2{grid-template-columns:minmax(0,724px) minmax(0,346px);justify-content:space-between;gap:48px}
.feat.f3{grid-template-columns:minmax(0,440px) 1fr}
.ft-text .h-sec-m>span:first-child{display:block}
.ft-text .body-m{margin-top:22px}
.ft-text .body-m:first-of-type{margin-top:28px}
.ft-text .link-arrow{margin-top:14px;font-size:17px}
.duo{position:relative;height:clamp(420px,40vw,560px);width:100%}
.duo img{position:absolute;height:auto;width:clamp(200px,18.5vw,266px)}
.duo .p1{left:0;top:0}.duo .p2{left:clamp(180px,16.1vw,232px);top:clamp(60px,6.4vw,92px)}
.duo .dash{position:absolute;left:clamp(170px,14.4vw,208px);top:clamp(150px,15vw,214px);width:clamp(70px,7.6vw,110px);z-index:3}
.ft-art img{height:auto;max-width:100%}
.f2 .ft-art img{width:100%}
.vend .for{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:28px;font-size:14px;color:var(--text-5);font-weight:500}
.chip-s{min-height:38px;padding:0 16px;border-radius:99px;background:#EAF2FE;color:var(--blue);font-weight:600;font-size:14px;cursor:default}
.vend ul{display:flex;flex-direction:column}
.vend li{margin-top:-62px;margin-left:var(--ml,0);width:min(571px,calc(100% - var(--ml,0px)))}
.vend li:first-child{margin-top:0}
.vend li:nth-child(1){--ml:108px}.vend li:nth-child(2){--ml:72px}.vend li:nth-child(3){--ml:36px}
.vend li img{width:100%}
.feat+.center{margin-top:48px;text-align:center}

/* ---------- Aturan main (thought bubbles) ---------- */
.aturan{padding-block:clamp(48px,7vw,100px)}
.bubbles{position:relative;display:flex;flex-direction:column;gap:clamp(20px,3vw,40px)}
.bubble{position:relative;width:min(402px,100%);padding:26px 34px;border-radius:48px;background:#fff;box-shadow:0 1px 2px rgba(14,26,43,.05),0 14px 40px rgba(14,26,43,.08);font-size:clamp(16px,1.3vw,17px);line-height:1.5}
.bubble .tail{position:absolute;bottom:-34px;display:flex;align-items:center;gap:5px}
.bubble .tail i{width:10px;height:10px;border-radius:50%;border:1px solid var(--line-2);background:#fff}.bubble .tail i+i{width:14px;height:14px}
.bubble .tail b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;font-size:10px;font-weight:700;box-shadow:0 0 0 3px #fff,0 6px 16px rgba(26,111,232,.3)}
.b1{align-self:center;margin-left:calc(50% - 201px + 0px)}.b1 .tail{right:44px;flex-direction:row-reverse}
.b2{align-self:flex-start;margin-left:34px;margin-top:-4px}.b2 .tail{left:70px;flex-direction:row-reverse}
.b3{align-self:flex-end;margin-right:70px;margin-top:-10px}.b3 .tail{right:44px;flex-direction:row-reverse}
.b4{align-self:center;margin-top:0}.b4 .tail{left:60px;flex-direction:row-reverse}
.bubble .tail{flex-direction:row}
.contoh-note{margin-top:60px;font-size:11px;font-weight:600;letter-spacing:.08em;color:#949CA7}

/* ---------- FAQ ---------- */
.faq{padding-block:clamp(40px,6vw,88px) clamp(80px,10vw,150px)}

/* ---------- CTA band ---------- */
.cta-band{position:relative;margin-top:-80px;padding-block:clamp(120px,13vw,190px);color:#fff;background:linear-gradient(180deg,rgba(62,147,241,0) 0%,rgba(62,147,241,.11) 3%,rgba(62,147,241,.35) 6.4%,rgba(62,147,241,.65) 9.6%,#3E93F1 16%,#2D82EC 50%,#1F74E6 78%,rgba(31,116,230,.9) 82%,rgba(31,116,230,.35) 91%,rgba(31,116,230,0) 100%)}
.cta-in{display:flex;align-items:center;justify-content:space-between;gap:48px}
.cta-copy{max-width:600px}
.cta-copy .h-hero{font-size:clamp(40px,4.7vw,68px)}
.cta-copy .l1,.cta-copy .l2{display:block}
.cta-copy p{margin-top:24px;max-width:520px;font-size:18px;line-height:1.5;color:#E3F0FF}
.cta-copy .actions{margin-top:36px;gap:18px 32px}
.cta-photo{flex:none;width:clamp(260px,28vw,330px);aspect-ratio:1;border-radius:44px;border:11px solid #fff;overflow:hidden;box-shadow:0 30px 70px rgba(10,50,120,.35);rotate:2deg}
.cta-photo img{width:100%;height:100%;object-fit:cover}

.scroll-line{position:fixed;left:0;top:0;right:0;height:3px;z-index:120;background:var(--blue);transform-origin:left;transform:scaleX(0);pointer-events:none}

/* ======================= PHONE (<= 900px) ======================= */
@media (max-width:900px){
  /* mobile hero (svh, so browser toolbars do not push it down): nav, headline and subcopy at the top, the photo wall fills the middle, the CTA block is anchored to the bottom edge of the first screen on solid blue; the wall fades into that blue so the buttons never sit on photos */
  .hero{height:auto;min-height:100vh;min-height:100svh;padding-top:88px;display:flex;flex-direction:column}
  .wall-d{display:none}
  .wall-wrap{position:relative;inset:auto;order:2;flex:1 1 auto;min-height:230px;margin-top:20px}
  .wall-wrap::before{content:"";position:absolute;left:0;right:0;top:0;height:70px;z-index:3;pointer-events:none;background:linear-gradient(180deg,#9CCBF3,rgba(156,203,243,0))}
  .wall-wrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:84px;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(232,241,254,0),#E8F1FE)}
  .wall-m{display:block;position:absolute;left:0;top:0;width:100%;height:100%;aspect-ratio:auto;translate:none}
  .hero-fade-top,.hero-fade-bottom{display:none}
  .hero-copy{position:relative;order:1;left:auto;top:auto;translate:none;display:block;width:calc(100% - 40px);margin-inline:auto}
  .hero-copy .h-hero{font-size:clamp(30px,8.6vw,64px)}
  .hero-desc{max-width:350px;text-wrap:balance;margin-top:14px;font-size:15.5px;line-height:1.45}
  .hero-cta{position:relative;order:3;left:auto;right:auto;bottom:auto;margin-top:0;padding:0 20px calc(10px + env(safe-area-inset-bottom,0px));background:#E8F1FE;flex-direction:column;gap:2px}
  .hero-cta .btn{width:min(350px,100%)}
  .hero-cta .link-arrow{color:#0E3A78;min-height:44px;justify-content:center}
  .hero-cta .trust{display:none}.hero-cta .trust-m{display:block;margin-top:0;font-size:12px;font-weight:500;color:#1B4A86}
  .sc-title{font-size:clamp(34px,10.2vw,52px)}
  .sc-copy .lead{font-size:15px}
  .sc-copy .btn{width:100%}
  .meja-bar{flex-direction:column;align-items:stretch}
  .meja .chip{padding:0 16px;font-size:14px}
  .meja .chips{flex-wrap:nowrap;gap:6px}
  .meja-bar .btn{width:100%}
  .linen .slider-arrow{width:44px;height:44px;margin-top:0}
  .linen .slider-arrow.prev{left:10px}.linen .slider-arrow.next{right:10px}
  .linen .geser{right:16px;top:auto;bottom:90px}
  .linen-bg{background-image:url(../assets/img/linen-mobile.webp)}
  .linen .slider-track{padding-inline:calc(50% - 300px * var(--k))}
  .video-grid{grid-template-columns:1fr;gap:36px}
  .flow{justify-content:center;flex-wrap:wrap}
  .flow>img{width:clamp(90px,26vw,141px)}
  .flow>img[alt*=Pita]{width:clamp(70px,20vw,106px)}
  .flow .next:last-of-type{display:none}
  .flow .vcard{width:min(247px,64vw);margin:8px auto 0}
  .phones{justify-content:center;gap:12px}
  .phones img{width:clamp(88px,27vw,129px)}
  .bawa-wrap{width:100%;overflow:visible}
  .bawa-grid{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 20px 56px;margin-inline:calc(50% - 50vw);width:100vw;cursor:grab}
  .bawa-grid>li{flex:none;scroll-snap-align:center}
  .bawa-grid::-webkit-scrollbar{display:none}
  .bawa-grid .g-video .vcard{width:min(247px,64vw)}
  .bawa-wrap .geser{display:inline-flex;position:absolute;right:20px;bottom:0}
  .bawa-grid li img{max-height:440px;width:auto}
  .feat{grid-template-columns:1fr!important;gap:36px;margin-top:64px}
  .feat.f2 .ft-art{order:2}
  .duo{height:clamp(420px,120vw,560px);max-width:420px;margin-inline:auto}
  .duo img{width:clamp(180px,52vw,240px)}
  .duo .p2{left:clamp(140px,40vw,200px)}
  .duo .dash{left:clamp(130px,38vw,180px);top:clamp(140px,40vw,190px);width:80px}
  .vend li{margin-top:-30px}
  .vend li:nth-child(n){--ml:0px}.vend li:nth-child(2){--ml:12px}.vend li:nth-child(3){--ml:24px}.vend li:nth-child(4){--ml:36px}
  .bubble{width:min(334px,100%);padding:22px 28px;border-radius:40px}
  .b1,.b3{align-self:flex-start;margin:0}.b2,.b4{align-self:flex-end;margin:0}
  .b1,.b2,.b3,.b4{margin-left:0;margin-right:0}
  .acc-a p{padding-right:0}
  .cta-in{flex-direction:column;align-items:flex-start;gap:40px}
  .cta-copy .btn{width:100%;max-width:340px}
  .cta-photo{align-self:center}
  .cta-band{padding-block:110px 130px}
}
@media (max-width:900px) and (min-width:560px){.hero-copy .h-hero{max-width:none}}
@media (max-width:900px) and (max-height:720px) and (orientation:portrait){.hero{padding-top:78px}.hero-desc{margin-top:10px}.wall-wrap{margin-top:12px;min-height:200px}}
/* short landscape phones: the wall cannot fit between the copy and the CTA, so the CTA follows the subcopy and the wall comes last */
@media (max-width:900px) and (max-height:500px) and (orientation:landscape){.hero-cta{order:2;margin-top:18px;padding-bottom:0;background:none}.wall-wrap{order:3}}

.tip .link-arrow{min-height:44px}
.looks button{min-height:max(9.4cqw,44px)}
.linen .slider-arrow{width:44px;height:44px}
.chip-s{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:900px){.linen .slider-arrow{width:44px;height:44px}}