/* Landing-only styles (docs/design "Landing v2"). */

/* Hero */
.hero{position:relative;background:#F4F6FA;padding-top:68px;overflow:hidden}
.deco{position:absolute;pointer-events:none}
.hero-inner{position:relative;max-width:1200px;margin:0 auto;padding:88px 24px 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.pill{display:flex;align-items:center;gap:8px;height:32px;padding:0 14px 0 10px;border-radius:999px;background:#FFFFFF;box-shadow:inset 0 0 0 1px #D5DCE8;font-size:14px;color:#16223A}
.pill i{width:8px;height:8px;border-radius:999px;background:#2D5BE3;animation:jbPulse 1.6s ease-out infinite}
.hero h1{font-weight:600;font-size:clamp(44px,7vw,92px);line-height:1;letter-spacing:-0.035em;max-width:1000px;display:flex;flex-wrap:wrap;justify-content:center;gap:0 .26em}
.hero h1 span{display:inline-block}
.hero h1 .blue{color:#2D5BE3}
.hero-sub{font-size:20px;line-height:30px;color:#5B667A;max-width:620px;text-wrap:pretty}
.hero .stores{margin-top:4px}
.hero-note{font-size:14px;color:#5B667A}
.hero-stage{position:relative;margin-top:48px;width:100%;display:flex;justify-content:center}
.hero-white{position:absolute;left:0;right:0;bottom:0;height:200px;background:#FFFFFF;z-index:0}

.float{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:16px;background:#FFFFFF;box-shadow:0 18px 40px -14px rgba(14,22,38,.25);text-align:start;z-index:2}
.float .ic{width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center}
.float .tx{display:flex;flex-direction:column}
.float .t1{font-size:15px;font-weight:500}
.float .t2{font-size:13px;color:#5B667A}
.float-coffee{left:calc(50% - 470px);top:90px}
.float-coffee .ic{background:#E8EEFD;color:#2D5BE3}
.float-coffee .t2{color:#187A4D;display:flex;align-items:center;gap:4px}
.float-dewa{left:calc(50% - 420px);top:330px}
.float-dewa .ic{background:#FBF3E6;color:#A35F00}
.float-dining{left:calc(50% + 200px);top:150px;width:240px;flex-direction:column;align-items:stretch;gap:8px;padding:16px 18px}
.float-dining .head{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500}
.float-dining .head .left{flex:1;text-align:end;color:#5B667A;font-weight:400;font-size:13px}
.float-dining .track{height:8px;border-radius:999px;background:#E3E8F0;overflow:hidden}
.float-dining .track div{width:68%;height:100%;background:#16223A;border-radius:999px}
.float-grow{left:calc(50% + 230px);top:380px;max-width:250px;padding:12px 16px;border-radius:16px 16px 16px 4px;background:#2D5BE3;color:#FFFFFF;box-shadow:0 18px 40px -14px rgba(45,91,227,.5);font-size:15px;line-height:21px;display:block}
@media (max-width:1079px){.float{display:none}}

.phone-hero{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px}
.bezel{padding:10px;border-radius:50px;background:#16223A;box-shadow:0 50px 100px -30px rgba(14,22,38,.55)}
.screen{width:314px;height:682px;border-radius:40px;overflow:hidden;position:relative;background:#FFFFFF}
.phone-box{position:absolute;left:0;top:0;width:393px;height:852px;transform-origin:0 0;overflow:hidden;background:#FFFFFF}

.tap-note{padding:12px 0 0;display:flex;justify-content:center}
.tap-note div{display:flex;align-items:center;gap:8px;font:400 13px/16px 'IBM Plex Mono',monospace;color:#5B667A;letter-spacing:.04em}
.tap-note i{width:6px;height:6px;border-radius:999px;background:#2D5BE3}

/* Marquee */
.marquee{padding:72px 0 0;overflow:hidden}
.marquee-track{display:flex;width:max-content}
.marquee-group{display:flex;gap:16px;padding-right:16px}
.mchip{flex:none;height:56px;padding:0 22px 0 14px;border-radius:999px;background:#F4F6FA;display:flex;align-items:center;gap:10px;font-size:17px;white-space:nowrap}
.mchip span{width:32px;height:32px;border-radius:999px;background:#FFFFFF;display:flex;align-items:center;justify-content:center;color:#2D5BE3}

/* Try it */
.try{padding-top:120px;scroll-margin-top:80px}
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:56px;align-items:center}
.col{display:flex;flex-direction:column;gap:18px}
.ways{display:flex;gap:10px;flex-wrap:wrap}
.way{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1.5px #E3E8F0;font-size:15px}
.way jb-icon{color:#2D5BE3}
.try-box{position:relative;background:#F4F6FA;border-radius:28px;padding:28px;display:flex;flex-direction:column;gap:16px;min-height:440px;box-sizing:border-box}
.try-box>svg{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);overflow:visible;pointer-events:none}
.try-input{position:relative;display:flex;align-items:center;gap:10px;height:60px;padding:0 8px 0 18px;border-radius:16px;background:#FFFFFF;box-shadow:inset 0 0 0 1.5px #D5DCE8}
.try-input.touched{box-shadow:inset 0 0 0 2px #2D5BE3}
.try-input jb-icon{color:#2D5BE3}
.try-input input{flex:1;min-width:0;border:none;background:none;font-size:18px;color:#16223A;height:100%}
.try-save{height:44px;padding:0 18px;border:none;border-radius:10px;background:#E8EEFD;color:#8A94A6;font-weight:600;font-size:16px;cursor:pointer;transition:background .2s}
.try-save.ready{background:#2D5BE3;color:#FFFFFF}
.preview{position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:#FFFFFF;box-shadow:inset 0 0 0 1.5px #2D5BE3}
.preview[hidden]{display:none}
.preview .ic{width:44px;height:44px;border-radius:999px;background:#E8EEFD;color:#2D5BE3;display:flex;align-items:center;justify-content:center}
.preview .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.preview .m{font-weight:600;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preview .c{font-size:14px;color:#5B667A}
.preview .a{font-weight:600;font-size:19px;font-variant-numeric:tabular-nums}
.try-day{position:relative;font:400 12px/16px 'IBM Plex Mono',monospace;color:#5B667A;letter-spacing:.04em;margin-top:4px}
.try-list{position:relative;display:flex;flex-direction:column;gap:2px}
.entry{display:flex;align-items:center;gap:12px;min-height:60px;border-bottom:1.5px dashed #D5DCE8}
.entry.new{animation:jbEntryIn .5s cubic-bezier(.2,.8,.2,1) both}
.entry .ic{width:36px;height:36px;border-radius:999px;background:#FFFFFF;display:flex;align-items:center;justify-content:center}
.entry .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.entry .m{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entry .c{font-size:13px;color:#5B667A}
.entry .a{font-weight:500;font-size:16px;font-variant-numeric:tabular-nums}

/* Tour */
.tour{padding-top:160px;scroll-margin-top:68px}
.tour-head{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;margin-bottom:24px}
.tour-head .h2{max-width:760px}
.tour-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:64px;align-items:start}
.steps{display:flex;flex-direction:column}
.step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:40px 0}
.step-meta{display:flex;align-items:center;gap:12px}
.badge{width:44px;height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#F4F6FA;color:#5B667A;transition:all .4s ease}
.step.on .badge{background:#2D5BE3;color:#FFFFFF}
.step-num{font:400 13px/16px 'IBM Plex Mono',monospace;color:#5B667A;letter-spacing:.06em}
.step h3{font-weight:600;font-size:clamp(30px,3.4vw,44px);line-height:1.08;letter-spacing:-0.02em;text-wrap:balance;color:#16223A;transition:color .4s ease}
.step p{font-size:18px;line-height:28px;color:#5B667A;max-width:480px;text-wrap:pretty}
.points{display:flex;flex-direction:column;gap:10px;margin-top:4px;font-size:16px;line-height:22px}
.tour-side{display:none}
@media (min-width:960px){
  .tour-grid{grid-template-columns:minmax(0,1fr) auto}
  .step h3{color:#B9C2D3}
  .step.on h3{color:#16223A}
  .tour-side{position:sticky;top:calc(50vh - 340px);display:flex;gap:28px;align-items:center}
}
.dots{display:flex;flex-direction:column;gap:10px}
.dots button{width:8px;height:8px;border-radius:999px;border:none;padding:0;background:#D5DCE8;cursor:pointer;transition:all .4s cubic-bezier(.2,.8,.2,1)}
.dots button.on{height:36px;background:#2D5BE3}
.tour-bezel{padding:10px;border-radius:48px;background:#16223A;box-shadow:0 50px 100px -30px rgba(14,22,38,.5)}
.tour-screen{width:303px;height:656px;border-radius:38px;overflow:hidden;position:relative;background:#FFFFFF}
.tour-phone{opacity:0;pointer-events:none;transform:scale(.771) translateY(24px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.tour-phone.past{transform:scale(.771) translateY(-24px)}
.tour-phone.on{opacity:1;pointer-events:auto;transform:scale(.771) translateY(0)}

/* Gallery */
.details{padding:140px 0 0;overflow:hidden}
.details-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.details-head .h2{font-size:clamp(30px,3.6vw,44px);line-height:1.1;letter-spacing:-0.02em;max-width:620px}
.arrows{display:flex;gap:8px}
.arrows button{width:52px;height:52px;border-radius:999px;border:none;background:#F4F6FA;color:#16223A;display:flex;align-items:center;justify-content:center;cursor:pointer}
.arrows button:hover{background:#E3E8F0}
.arrows button.next{background:#16223A;color:#FFFFFF}
.arrows button.next:hover{background:#2D5BE3}
.gallery{display:flex;gap:40px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:56px max(24px,calc((100vw - 1152px) / 2)) 80px;perspective:1400px}
.gallery::-webkit-scrollbar{display:none}
.card{flex:none;scroll-snap-align:center;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.card-bezel{padding:8px;border-radius:40px;background:#16223A;box-shadow:0 40px 70px -30px rgba(14,22,38,.5);transition:transform .35s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.card-screen{width:255px;height:553px;border-radius:32px;overflow:hidden;position:relative;background:#FFFFFF}
.card-screen .phone-box{transform:scale(.65)}
.card-text{display:flex;flex-direction:column;gap:4px;max-width:270px}
.card-text b{font-weight:600;font-size:19px}
.card-text span{font-size:15px;line-height:22px;color:#5B667A;text-wrap:pretty}

/* Privacy */
.privacy{background:#0E1626;color:#FFFFFF;scroll-margin-top:68px;position:relative;overflow:hidden}
.privacy-inner{position:relative;max-width:1200px;margin:0 auto;padding:128px 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:64px;align-items:center}
.privacy .eyebrow{color:#7B9BFF}
.privacy .lede{color:#B9C2D3}
.plist{display:flex;flex-direction:column;margin-top:8px}
.plist div{display:flex;gap:14px;padding:16px 0;border-bottom:1.5px dashed #2A3650;font-size:16px}
.plist div:last-child{border-bottom:none}
.plist jb-icon{color:#7B9BFF}
.vault-wrap{display:flex;flex-direction:column;gap:16px;align-items:stretch;max-width:440px;width:100%;justify-self:center}
.vault{background:#16223A;border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:6px;box-shadow:inset 0 0 0 1px #2A3650}
.vault-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.vault-head span{font-size:15px;color:#B9C2D3}
.mask-btn{height:40px;padding:0 14px 0 10px;border-radius:999px;border:none;background:#2D5BE3;color:#FFFFFF;display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px;cursor:pointer;animation:jbPulse 1.8s ease-out infinite}
.mask-btn:hover{background:#3D6BF0}
.masked .mask-btn{animation:none}
.mask-btn .when-shown{display:contents}
.mask-btn .when-masked,.masked .mask-btn .when-shown{display:none}
.masked .mask-btn .when-masked{display:contents}
.acct{display:flex;align-items:center;gap:12px;min-height:56px;border-top:1px solid #2A3650}
.acct jb-icon{color:#B9C2D3}
.acct .n{flex:1;font-size:16px}
.acct .b{font-weight:600;font-size:17px;font-variant-numeric:tabular-nums;transition:filter .35s ease,opacity .35s ease}
.masked .acct .b{filter:blur(9px);opacity:.7;user-select:none}

/* Pricing */
.pricing{padding-top:140px;display:flex;flex-direction:column;gap:40px;align-items:center;scroll-margin-top:72px}
.pricing-head{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.pricing-head .h2{max-width:720px}
.seg{position:relative;display:flex;padding:4px;border-radius:999px;background:#F4F6FA}
.seg-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:#FFFFFF;box-shadow:0 2px 8px rgba(14,22,38,.12);transition:left .35s cubic-bezier(.2,.8,.2,1)}
.seg.monthly .seg-thumb{left:calc(50% + 0px)}
.seg button{position:relative;height:44px;min-width:150px;padding:0 18px;border:none;background:none;font-weight:600;font-size:15px;color:#5B667A;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.seg button[aria-pressed="true"]{color:#16223A}
.save{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:#E6F2EC;color:#187A4D}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px;max-width:900px;width:100%}
.plan{border-radius:24px;box-shadow:inset 0 0 0 1.5px #E3E8F0;padding:36px;display:flex;flex-direction:column;gap:24px}
.plan.pro{box-shadow:none;background:#16223A;color:#FFFFFF;position:relative;overflow:hidden}
.plan-top{display:flex;flex-direction:column;gap:6px}
.plan-name{font-weight:600;font-size:20px;display:flex;align-items:center;gap:10px}
.trial{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:#2D5BE3}
.price{font-weight:600;font-size:44px;letter-spacing:-0.03em}
.price-row{display:flex;align-items:baseline;gap:8px}
.per{font-size:16px;color:#B9C2D3}
.plan-sub{font-size:15px;color:#5B667A}
.pro .plan-sub{color:#B9C2D3}
.feats{display:flex;flex-direction:column;gap:12px;font-size:16px}
.feats jb-icon{color:inherit}
.pro .feats jb-icon{color:#7B9BFF}
.plan-foot{font-size:14px;color:#B9C2D3}

/* Download */
.download{padding:140px 24px;scroll-margin-top:72px}
.dl-card{position:relative;background:#2D5BE3;color:#FFFFFF;border-radius:36px;padding:88px 32px;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;overflow:hidden}
.dl-card h2{position:relative;font-weight:600;font-size:clamp(34px,5vw,64px);line-height:1.04;letter-spacing:-0.03em;max-width:760px;text-wrap:balance}
.dl-card p{position:relative;font-size:19px;line-height:28px;color:#E8EEFD;max-width:500px;text-wrap:pretty}
.dl-card .stores{margin-top:8px;position:relative}
.points div,.feats div{display:flex;gap:10px}
.points jb-icon{color:#2D5BE3}