/* Realistic phone mockup shared by every template.
   Size it by setting width on .phone (or --pw). Everything inside scales with the screen
   width through container units, so a 240px phone and a 380px phone look identical. */
.phone{--pw:320px;width:var(--pw);aspect-ratio:393/852;position:relative;flex:none;border-radius:calc(var(--pw)*.165);
  padding:calc(var(--pw)*.028);
  background:linear-gradient(145deg,#3a3f4b 0%,#14171d 18%,#2b2f38 50%,#0e1015 82%,#3a3f4b 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 0 0 calc(var(--pw)*.009) #0b0d11,
    0 1px 1px rgba(10,20,51,.08),
    0 12px 24px -8px rgba(10,20,51,.22),
    0 48px 80px -32px rgba(10,20,51,.38);
  isolation:isolate}
/* side buttons */
.phone::before,.phone::after{content:"";position:absolute;width:3px;border-radius:2px;background:linear-gradient(90deg,#1b1e24,#4a505c);z-index:-1}
.phone::before{left:-2px;top:22%;height:7%;box-shadow:0 calc(var(--pw)*.22) 0 #2a2e36}
.phone::after{right:-2px;top:28%;height:11%}
.ph-scr{position:relative;height:100%;width:100%;border-radius:calc(var(--pw)*.14);overflow:hidden;background:#F4F7FC;container-type:inline-size}
.ph-ui{position:absolute;inset:0;display:flex;flex-direction:column;font-size:4.07cqw;line-height:1.35;color:#101213;
  font-family:-apple-system,"SF Pro Text","Segoe UI",Roboto,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;letter-spacing:0;font-variant-numeric:tabular-nums;text-align:left}
.ph-island{position:absolute;top:2.9cqw;left:50%;transform:translateX(-50%);width:31cqw;height:9.4cqw;border-radius:99px;background:#000;z-index:5}
.ph-island::after{content:"";position:absolute;right:3.2cqw;top:50%;width:2.6cqw;height:2.6cqw;border-radius:50%;transform:translateY(-50%);background:radial-gradient(circle at 35% 35%,#2d3a5c,#05070c 70%)}
.ph-status{height:13.5cqw;flex:none;display:flex;align-items:center;justify-content:space-between;padding:1.2cqw 7.5cqw 0 9cqw;font-size:.94em;font-weight:600;position:relative;z-index:4}
.ph-status .ic{display:flex;gap:1.4cqw;align-items:center}
.ph-status svg{height:3.1cqw;width:auto;display:block}
.ph-home{position:absolute;bottom:2cqw;left:50%;transform:translateX(-50%);width:35cqw;height:1.3cqw;border-radius:9px;background:#101213;opacity:.85;z-index:5}
.ph-dark .ph-status{color:#fff}.ph-dark .ph-home{background:#fff}
.ph-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 32%)}

/* ---- screen: DuitLedger dashboard ---- */
.d-top{display:flex;align-items:center;justify-content:space-between;padding:1.5cqw 5cqw 3.5cqw}
.d-top small{display:block;color:#57636C;font-size:.78em}
.d-top b{font-size:1.18em;font-weight:700}
.d-av{width:9.5cqw;height:9.5cqw;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 1px #E3E8F2}
.d-av img{width:62%;height:62%}
.d-body{flex:1;overflow:hidden;padding:0 4.6cqw;display:flex;flex-direction:column;gap:3.4cqw}
.d-bal{border-radius:4.6cqw;padding:5cqw;color:#fff;background:linear-gradient(135deg,#2E63EC 0%,#2458E0 45%,#1A3FAE 100%);box-shadow:0 3cqw 6cqw -2cqw rgba(36,88,224,.45);position:relative;overflow:hidden}
.d-bal::after{content:"";position:absolute;right:-12cqw;top:-14cqw;width:40cqw;height:40cqw;border-radius:50%;background:rgba(255,255,255,.08)}
.d-bal .l{font-size:.82em;opacity:.8}
.d-bal .v{font-size:2em;font-weight:700;letter-spacing:-.02em;margin-top:.6cqw}
.d-bal .g{display:grid;grid-template-columns:1fr 1fr;gap:3cqw 4cqw;margin-top:4cqw;font-size:.8em}
.d-bal .g span{display:block;opacity:.72}
.d-bal .g b{font-weight:600;font-size:1.08em}
.d-card{background:#fff;border-radius:4.2cqw;padding:4.2cqw;box-shadow:0 0 0 1px rgba(16,18,19,.04)}
.d-card h4{margin:0 0 3.2cqw;font-size:.92em;font-weight:700;display:flex;justify-content:space-between}
.d-card h4 em{font-style:normal;font-weight:500;color:#57636C;font-size:.9em}
.d-qa{display:grid;grid-template-columns:repeat(4,1fr);gap:2cqw;text-align:center;font-size:.72em;color:#57636C}
.d-qa i{width:11.5cqw;height:11.5cqw;border-radius:3.6cqw;display:grid;place-items:center;margin:0 auto 1.6cqw}
.d-qa svg{width:52%;height:52%}
.q-in{background:#E3F6EE;color:#1FA971}.q-out{background:#FDE8E8;color:#EF4444}.q-scan{background:#E9EEF7;color:#2458E0}.q-inv{background:#FEF3DC;color:#D98A06}
.d-chart{height:24cqw;display:block;width:100%}
.d-rows{display:grid;gap:2.8cqw;font-size:.84em}
.d-row{display:flex;align-items:center;gap:3cqw}
.d-row .ic{width:8.5cqw;height:8.5cqw;border-radius:2.6cqw;display:grid;place-items:center;flex:none;font-size:.9em}
.d-row .n{flex:1;min-width:0}.d-row .n small{display:block;color:#57636C;font-size:.86em}
.d-row .a{font-weight:600}.d-row .a.in{color:#1FA971}.d-row .a.out{color:#EF4444}
.d-tabs{flex:none;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;padding:2.4cqw 2cqw 7.5cqw;background:rgba(255,255,255,.94);border-top:1px solid #E6EAF2;font-size:.64em;color:#8A94A6;text-align:center}
.d-tabs svg{width:6cqw;height:6cqw;display:block;margin:0 auto 1cqw}
.d-tabs .on{color:#2458E0;font-weight:600}
.d-tabs .plus{width:12.5cqw;height:12.5cqw;border-radius:50%;background:#2458E0;color:#fff;display:grid;place-items:center;margin:-6cqw auto 0;box-shadow:0 2cqw 4cqw -1cqw rgba(36,88,224,.6)}
.d-tabs .plus svg{margin:0;width:6.4cqw;height:6.4cqw}

/* ---- screen: WhatsApp chat (iOS) ---- */
.w-ui{background:#EFE7DD}
.w-ui .ph-status{background:#F6F6F6}
.w-head{flex:none;display:flex;align-items:center;gap:2.6cqw;padding:1cqw 4cqw 2.8cqw 2.6cqw;background:#F6F6F6;border-bottom:1px solid #DADADA}
.w-head .back{color:#007AFF;display:flex;align-items:center;font-size:.95em}
.w-head .back svg{width:4.6cqw;height:4.6cqw}
.w-head .av{width:9.4cqw;height:9.4cqw;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 1px #E0E0E0;flex:none}
.w-head .av img{width:64%;height:64%}
.w-head .nm{flex:1;min-width:0;line-height:1.2}
.w-head .nm b{display:flex;align-items:center;gap:1cqw;font-size:.95em;font-weight:600}
.w-head .nm b svg{width:3.6cqw;height:3.6cqw}
.w-head .nm small{color:#667781;font-size:.72em}
.w-head .act{display:flex;gap:5cqw;color:#007AFF}.w-head .act svg{width:5.6cqw;height:5.6cqw}
.w-msgs{flex:1;overflow:hidden;padding:3cqw 3.4cqw;display:flex;flex-direction:column;justify-content:flex-end;gap:1.6cqw;font-size:.9em;
  background-color:#EFE7DD;background-image:radial-gradient(rgba(120,100,80,.09) 1px,transparent 1.2px),radial-gradient(rgba(120,100,80,.06) 1px,transparent 1.2px);background-size:7cqw 7cqw,11cqw 11cqw;background-position:0 0,3cqw 4cqw}
.w-day{align-self:center;background:#fff;color:#54656F;font-size:.74em;padding:.9cqw 3cqw;border-radius:2cqw;box-shadow:0 1px .5px rgba(11,20,26,.13);margin-bottom:1.4cqw}
.w-m{max-width:80%;padding:1.8cqw 2.6cqw 1.6cqw;border-radius:3cqw;box-shadow:0 1px .5px rgba(11,20,26,.13);position:relative;line-height:1.38}
.w-m .tm{float:right;margin:1.6cqw 0 -1cqw 2.4cqw;font-size:.7em;color:#667781;display:inline-flex;align-items:center;gap:.6cqw;line-height:1}
.w-m .tm svg{width:3.8cqw;height:3.8cqw;color:#53BDEB}
.w-me{align-self:flex-end;background:#D9FDD3;border-top-right-radius:.8cqw}
.w-bot{align-self:flex-start;background:#fff;border-top-left-radius:.8cqw}
.w-bot .hd{color:#2458E0;font-weight:600;font-size:.86em;margin-bottom:.6cqw;display:block}
.w-card{background:#F4F7FC;border-radius:2cqw;padding:2cqw 2.6cqw;margin:1cqw 0 .6cqw;font-size:.92em}
.w-card div{display:flex;justify-content:space-between;gap:3cqw}
.w-card .tot{border-top:1px dashed #C9D2E3;margin-top:1.2cqw;padding-top:1.2cqw;font-weight:700}
.w-btns{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:1.6cqw -2.6cqw -1.6cqw;border-top:1px solid #E9EDEF;background:#E9EDEF;border-radius:0 0 3cqw 3cqw;overflow:hidden}
.w-btns span{background:#fff;text-align:center;color:#027EB5;padding:1.8cqw 0;font-size:.9em;font-weight:500}
.w-in{flex:none;display:flex;align-items:center;gap:2.6cqw;padding:2.2cqw 3.4cqw 8.5cqw;background:#F6F6F6;border-top:1px solid #DADADA;color:#007AFF}
.w-in svg{width:5.8cqw;height:5.8cqw;flex:none}
.w-in .f{flex:1;height:8.4cqw;border-radius:5cqw;background:#fff;border:1px solid #DCDCDC}

/* ---- screen: AI receipt scan ---- */
.s-ui{background:#0C0F14;color:#fff}
.s-cam{flex:1;position:relative;overflow:hidden;background:radial-gradient(120% 80% at 50% 30%,#3A3530 0%,#1B1915 60%,#0C0F14 100%)}
.s-rc{position:absolute;left:50%;top:8cqw;width:64cqw;transform:translateX(-50%) rotate(-3deg);background:#FBFAF6;color:#2A2A2A;padding:5cqw 5cqw 7cqw;font-family:"Courier New",ui-monospace,monospace;font-size:.74em;line-height:1.6;box-shadow:0 4cqw 10cqw rgba(0,0,0,.55);
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 2.4cqw) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/4.8cqw 2.4cqw repeat-x;
          mask:linear-gradient(#000,#000) top/100% calc(100% - 2.4cqw) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/4.8cqw 2.4cqw repeat-x}
.s-rc .c{text-align:center;font-weight:700;font-size:1.15em;margin-bottom:2cqw}
.s-rc .r{display:flex;justify-content:space-between}
.s-rc hr{border:0;border-top:1px dashed #999;margin:2cqw 0}
.s-rc .rt{font-weight:700;font-size:1.2em}
.s-frame{position:absolute;inset:3cqw 9cqw auto;height:92cqw;pointer-events:none}
.s-frame i{position:absolute;width:8cqw;height:8cqw;border:.9cqw solid #FFD23F}
.s-frame i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-top-left-radius:3cqw}
.s-frame i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-top-right-radius:3cqw}
.s-frame i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-bottom-left-radius:3cqw}
.s-frame i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-bottom-right-radius:3cqw}
.s-scan{position:absolute;left:9cqw;right:9cqw;top:3cqw;height:16cqw;background:linear-gradient(180deg,rgba(255,210,63,0),rgba(255,210,63,.35));border-bottom:2px solid #FFD23F;animation:sscan 2.6s cubic-bezier(.65,0,.35,1) infinite alternate}
@keyframes sscan{to{transform:translateY(76cqw)}}
.s-sheet{flex:none;background:#fff;color:#101213;border-radius:6cqw 6cqw 0 0;padding:3cqw 5cqw 8.5cqw;margin-top:-8cqw;position:relative;z-index:2}
.s-sheet .grab{width:10cqw;height:1.2cqw;border-radius:9px;background:#D5DAE3;margin:0 auto 3cqw}
.s-sheet h5{margin:0 0 2.6cqw;font-size:.95em;display:flex;align-items:center;gap:1.6cqw}
.s-sheet h5 span{font-size:.72em;font-weight:600;color:#1FA971;background:#E3F6EE;border-radius:9px;padding:.4cqw 2cqw}
.s-f{display:flex;justify-content:space-between;padding:2cqw 0;border-bottom:1px solid #EEF1F6;font-size:.84em}
.s-f span{color:#57636C}.s-f b{font-weight:600}
.s-btn{margin-top:3.4cqw;height:11cqw;border-radius:3.4cqw;background:#2458E0;color:#fff;display:grid;place-items:center;font-weight:600;font-size:.9em}

@media (prefers-reduced-motion:reduce){.s-scan{animation:none}}
.phone.chat-top .w-msgs{justify-content:flex-start}

.w-photo .ph-img{display:block;height:16cqw;margin:0 0 1.4cqw;border-radius:2cqw;background:linear-gradient(135deg,#FBFAF6,#E7E1D6);color:#5B5346;display:flex;align-items:center;justify-content:center;font-size:.86em}
.phone[data-more] .w-msgs{justify-content:flex-start}

/* ---- form-style screens ---- */
.f-head{flex:none;display:flex;align-items:center;gap:2.6cqw;padding:1cqw 5cqw 3.4cqw}
.f-head .f-back{color:#2458E0;display:flex}.f-head .f-back svg{width:5cqw;height:5cqw}
.f-head b{display:block;font-size:1.15em}.f-head small{display:block;color:#57636C;font-size:.74em}
.f-body{flex:1;overflow:hidden;padding:0 4.6cqw;display:flex;flex-direction:column;gap:3cqw}
.f-card{background:#fff;border-radius:4cqw;padding:3.6cqw 4cqw;box-shadow:0 0 0 1px rgba(16,18,19,.04)}
.f-card h4{margin:0 0 2cqw;font-size:.84em;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.f-card h4 em{font-style:normal;font-size:.82em;font-weight:600;color:#1FA971;background:#E3F6EE;border-radius:9px;padding:.3cqw 2cqw}
.f-row{display:flex;justify-content:space-between;gap:3cqw;padding:1.5cqw 0;font-size:.8em;border-top:1px solid #EEF1F6}
.f-row:first-of-type{border-top:0}
.f-row span{color:#57636C}.f-row b{font-weight:600;text-align:right}
.f-item{display:flex;justify-content:space-between;align-items:center;padding:1.8cqw 0;border-top:1px solid #EEF1F6;font-size:.82em}
.f-item:first-of-type{border-top:0}
.f-item small{display:block;color:#57636C;font-size:.86em}
.f-add{color:#2458E0;font-weight:600;font-size:.8em;padding:1.8cqw 0;border-top:1px dashed #C9D2E3}
.f-total{display:flex;justify-content:space-between;align-items:center;padding-top:2.4cqw;border-top:1px solid #EEF1F6;font-size:.86em}
.f-total b{font-size:1.25em;color:#2458E0}
.f-mic{display:flex;align-items:center;gap:3cqw;background:#EAF0FF;border-radius:4cqw;padding:3cqw 4cqw;font-size:.8em}
.f-mic i{flex:none;width:10cqw;height:10cqw;border-radius:50%;background:#2458E0;color:#fff;display:grid;place-items:center}
.f-mic i svg{width:5cqw;height:5cqw}
.f-mic small{display:block;color:#57636C;font-size:.9em}
.f-foot{flex:none;padding:3cqw 4.6cqw 8cqw;display:grid;gap:2.4cqw}
.f-foot.two{grid-template-columns:1fr 1.4fr}
.f-btn{height:11cqw;border-radius:3.4cqw;background:#2458E0;color:#fff;display:grid;place-items:center;font-weight:600;font-size:.9em}
.f-btn.ghost{background:#E9EEF7;color:#2458E0}
.f-emp{display:flex;align-items:center;gap:3cqw;font-size:.86em}
.f-emp small{display:block;color:#57636C;font-size:.86em}
.f-av{flex:none;width:10cqw;height:10cqw;border-radius:50%;background:#FEF3DC;color:#B7791F;display:grid;place-items:center;font-weight:700;font-size:.82em}
.f-net .f-row:first-child b{color:#1FA971;font-size:1.15em;font-weight:700}
.f-net .f-sub{font-size:.72em}
.f-range{display:flex;align-items:center;justify-content:center;gap:2.4cqw;background:#fff;border-radius:99px;padding:2.4cqw;font-size:.8em;font-weight:600;box-shadow:0 0 0 1px rgba(16,18,19,.04)}
.f-range i{font-style:normal;color:#8A94A6}
.f-sum{display:grid;gap:2cqw;font-size:.82em}
.f-sum div{display:flex;justify-content:space-between}
.f-sum small{color:#57636C;font-size:.95em}
.f-sum .in{color:#1FA971}.f-sum .out{color:#EF4444}
.f-sum div:last-child{border-top:1px solid #EEF1F6;padding-top:2cqw}
.f-opt{display:flex;align-items:center;gap:3cqw;padding:2.2cqw 0;border-top:1px solid #EEF1F6;font-size:.8em}
.f-opt:first-of-type{border-top:0}
.f-opt small{display:block;color:#57636C;font-size:.88em}
.f-ic{flex:none;width:10cqw;height:10cqw;border-radius:2.8cqw;display:grid;place-items:center;font-weight:800;font-size:.82em;color:#fff}
.f-ic.xl{background:#1D7A45}.f-ic.sql{background:#2458E0;font-size:.62em}
.f-toast{background:#0A1433;color:#fff;border-radius:3cqw;padding:2.6cqw 3.4cqw;font-size:.74em}

/* camera only, before the AI has read it */
.phone[data-cam] .s-sheet{display:none}

/* ---- tutorial screens ---- */
.f-done{text-align:center;display:grid;gap:2.6cqw;padding:5cqw 4cqw}
.f-tick{width:11cqw;height:11cqw;border-radius:50%;background:#E3F6EE;color:#1FA971;display:grid;place-items:center;margin:0 auto;font-weight:800}
.f-done b{font-size:.92em}.f-done small{color:#57636C;font-size:.74em}
.f-big{font-size:1.6em;font-weight:700;letter-spacing:-.02em}
.f-two{display:grid;grid-template-columns:1fr 1fr;gap:2cqw}
.f-two .f-btn{font-size:.72em}
.f-btn.wa{background:#25D366}
.f-ok b{color:#1FA971}
.f-p{display:block;color:#57636C;font-size:.72em;line-height:1.45;margin-bottom:2.4cqw}
.f-code{font-family:"Familjen Grotesk",monospace;font-weight:700;font-size:1.25em;letter-spacing:.06em;text-align:center;background:#F4F7FC;border-radius:3cqw;padding:2.6cqw;margin-bottom:2.6cqw}
.f-link{text-align:center;color:#2458E0;font-weight:600;font-size:.78em;padding-top:2.4cqw}
.f-pin{display:flex;gap:2cqw;justify-content:center}
.f-pin i{width:8cqw;height:9cqw;border-radius:2cqw;background:#F4F7FC;box-shadow:inset 0 0 0 1px #DCE2EE}
.f-seg{display:grid;grid-template-columns:1fr 1fr;background:#E9EEF7;border-radius:99px;padding:1cqw;font-size:.82em;text-align:center}
.f-seg span{padding:1.8cqw;border-radius:99px;color:#57636C}
.f-seg .on{background:#fff;color:#101213;font-weight:700;box-shadow:0 1px 2px rgba(16,18,19,.08)}
.f-seg.sm{font-size:.74em}
.f-chips{display:flex;flex-wrap:wrap;gap:1.6cqw}
.f-chips span{font-size:.72em;padding:1.4cqw 2.8cqw;border-radius:99px;background:#F4F7FC;color:#3B4258}
.f-chips .on{background:#2458E0;color:#fff;font-weight:600}
.f-hint{font-size:.76em;color:#3B4258;line-height:1.5;background:#EAF0FF}