/* ══════════════════════════════════════════════════════
   BRANDALE · אפליקציית העסק (template-app.php)
   נטען רק בעמוד הזה, אחרי landing.css ו-inner.css. הבסיס (צבעים, הדר, pill, תפריט, פוטר)
   מגיע מ-landing.css. כאן רק מה שייחודי לעמוד, והטלפונים (המוקאפ המאושר, כולו תחת .phone).
   מחלקות בתוך הטלפונים שהתנגשו עם האתר קיבלו קידומת m-.
   ══════════════════════════════════════════════════════ */

/* ─── הפונט של האפליקציה עצמה (המוקאפ) ─── */
/* Assistant: אותם קבצים ש-Elementor מארח מקומית (פונט משתנה, hebrew + latin) */
@font-face{font-family:'Assistant';src:url('fonts/assistant-hebrew.woff2') format('woff2');font-weight:200 800;font-display:swap;unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Assistant';src:url('fonts/assistant-latin.woff2') format('woff2');font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/plex-mono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/plex-mono-500.woff2') format('woff2');font-weight:500 700;font-display:swap}

.dir-ltr{direction:ltr;unicode-bidi:isolate;display:inline-block;text-align:right}
.appl section[id]{scroll-margin-top:64px}
/* landing.css נותן ל-display שוליים של הסליידר בעמוד הבית */
.appl .display{margin-block:0}

/* השוליים של המוקאפ (16px בטלפון), לכל העמוד כולל ההדר */
body.page-template-template-app{--gutter:clamp(16px,10.5vw - 24px,126px)}

/* reset.css של hello-elementor נותן לכותרות, לפסקאות, ל-figcaption ולכפתורים עיצוב משלו
   (מרווחים, גדלים, נטוי, מסגרת ורודה). כאן מחזירים את מה שהיה בעמוד המקורי.
   ספציפיות (0,0,2): גוברת על reset.css ונכנעת לכל מחלקה. */
main:where(.appl) :is(h1,h2,h3,h4,h5,h6){font-size:revert;font-weight:revert;line-height:revert;margin:0}
main:where(.appl) p{margin:0}
main:where(.appl) figcaption{color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit}
main:where(.appl) small{font-size:revert}
main:where(.appl) button{border:0;border-radius:0;padding:0;background:none;color:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;white-space:normal;text-align:center;transition:none;user-select:auto}

/* ══════════ טיפוגרפיה ══════════ */
.eyebrow{display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.3;color:var(--ash);margin-bottom:28px;letter-spacing:-.005em}
.eyebrow b{font-weight:400;color:var(--graphite);direction:ltr;unicode-bidi:isolate}
.eyebrow i{display:block;width:22px;height:1px;background:var(--hair)}
.display{font-size:clamp(40px,min(6.6vw,10.5vh),120px);line-height:1.06;letter-spacing:-.012em;font-weight:800;color:var(--frost)}
.h-lg{font-size:clamp(30px,5.6vw,72px);line-height:1.06;letter-spacing:-.012em;font-weight:800;color:var(--frost)}
.h-md{font-size:clamp(26px,4.6vw,58px);line-height:1.12;letter-spacing:-.01em;font-weight:800;color:var(--frost)}
.p-lead{font-size:18px;line-height:1.5;color:var(--ash);max-width:min(44ch,100%)}
.h-lg + .p-lead,.h-md + .p-lead{margin-top:28px}
.feat .h-md{font-size:clamp(28px,4vw,54px)}

/* ══════════ פתיח ══════════ */
.opening{position:relative;min-height:100svh;display:flex;align-items:center;padding-block:112px 72px;overflow:hidden}
.opening__in{width:100%;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:center}
.ln{overflow:hidden;display:block;padding-block:.02em}
.ln > span{display:block;white-space:nowrap;transform:translateY(106%);transition:transform 1.2s var(--ease)}
.is-in .ln > span{transform:translateY(0)}
.opening .p-lead{margin-top:32px;max-width:min(40ch,100%);font-size:clamp(18px,1.5vw,20px)}
.opening .eyebrow,.opening .p-lead,.facts,.opening__act{opacity:0;transform:translateY(22px);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
.opening .eyebrow{transition-delay:.1s}
.opening .p-lead{transition-delay:.55s}
.opening__act{transition-delay:.75s}
.facts{transition-delay:.9s}
.opening.is-in .eyebrow,.opening.is-in .p-lead,.opening.is-in .facts,.opening.is-in .opening__act{opacity:1;transform:none}
.opening__act{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:30px}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px}
.facts li{border:1px solid var(--hair);border-radius:var(--radius-full);padding:7px 16px;font-size:14px;line-height:1.3;color:var(--ash)}

/* שני טלפונים על חתימת ה-B */
.stack{position:relative;width:min(100%,520px,60svh);aspect-ratio:10/13;margin-inline:auto}
.stack .dev{position:absolute;opacity:0;transform:translateY(48px);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease)}
.opening.is-in .stack .dev{opacity:1;transform:none}
.stack .dev--front{width:60%;top:0;inset-inline-start:2%;z-index:2;transition-delay:.35s !important}
.stack .dev--back{width:51%;top:14%;inset-inline-end:0;z-index:1;transition-delay:.55s !important}
/* ממוקם כך שנקודת הליים נוחתת מתחת לטלפון האחורי, גלויה */
#bmark{position:absolute;z-index:0;left:50%;top:58%;width:128%;height:auto;transform:translate(-50%,-50%);
  overflow:visible;pointer-events:none;opacity:0;transition:opacity 1s var(--ease)}
.opening.is-in #bmark{opacity:1}
.sig__path{fill:none;stroke:var(--frost);stroke-width:1.25px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.sig__dot{fill:var(--signal);stroke:none;transform-box:fill-box;transform-origin:center}
.sig__dot.is-set{animation:pulse 2.6s var(--ease) .5s infinite}
@keyframes pulse{0%{transform:scale(1);opacity:1}7%{transform:scale(1.26);opacity:.9}14%{transform:scale(1);opacity:1}
  21%{transform:scale(1.15);opacity:.94}30%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:1}}
.cue{position:absolute;bottom:32px;inset-inline-start:var(--gutter);font-size:10px;color:var(--graphite);display:flex;align-items:center;gap:9px}
.cue i{display:block;width:22px;height:1px;background:var(--graphite);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleX(0);transform-origin:right}50%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(1);transform-origin:left}100%{transform:scaleX(0);transform-origin:left}}

/* ══════════ מרקי ══════════ */
.marq{overflow:hidden;white-space:nowrap;padding-block:clamp(32px,6vh,72px);border-block:1px solid var(--hair-soft);direction:ltr}
.marq__t{display:inline-flex;gap:72px;animation:slide 38s linear infinite;will-change:transform}
.marq__t span{font-size:clamp(30px,5.2vw,66px);line-height:1.08;letter-spacing:-.012em;font-weight:800;color:var(--frost)}
.marq__t span:nth-child(even){color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.34)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ══════════ סקשנים ══════════ */
.blk{position:relative;padding-block:clamp(80px,13vh,150px)}
.sec__hd{display:flex;justify-content:space-between;align-items:flex-end;gap:36px 64px}
.sec__hd > div{flex:0 1 auto;min-width:0}
.sec__hd .p-lead{flex:1 1 300px;max-width:44ch}

/* טקסט + טלפון */
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:center}
.feat--flip .feat__media{order:-1}
.feat__media{display:flex;flex-direction:column;align-items:stretch;min-width:0}
.feat__txt{min-width:0}
.feat__media > .dev{margin-inline:auto}
.try{align-self:center}
.feat__media > .dev{width:min(100%,350px)}
.feat--wide{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}

/* רשימת נקודות בקווי שיער */
.ticks{margin-top:36px;border-top:1px solid var(--hair-soft);max-width:520px}
.ticks li{position:relative;padding-block:15px;padding-inline-start:26px;border-bottom:1px solid var(--hair-soft);font-size:17px;line-height:1.45;color:var(--ash)}
.ticks li::before{content:'';position:absolute;inset-inline-start:2px;top:calc(15px + .52em);width:7px;height:7px;border-radius:50%;border:1px solid var(--graphite)}

/* שלבים, בספרות מתאר כמו "תהליך" בעמוד הבית */
.how{border-top:1px solid var(--hair)}
.how li{display:grid;grid-template-columns:clamp(64px,7vw,104px) minmax(0,1fr);gap:8px 20px;padding-block:clamp(22px,3.4vh,34px);border-bottom:1px solid var(--hair)}
.how__n{grid-row:span 2;font-size:clamp(46px,5.4vw,80px);line-height:.92;letter-spacing:-.012em;font-weight:800;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.34);direction:ltr;text-align:right}
.how__t{font-size:clamp(22px,2.4vw,32px);line-height:1.12;letter-spacing:-.01em;font-weight:800;color:var(--frost)}
.how__d{font-size:16px;line-height:1.55;color:var(--ash);max-width:40ch}

.split > *{min-width:0}
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:center;margin-top:clamp(48px,8vh,88px)}

/* קבוצות טלפונים */
.duo,.trio{display:grid;gap:clamp(16px,2.4vw,36px);align-items:start}
.duo{grid-template-columns:repeat(2,minmax(0,1fr))}
.trio{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(48px,8vh,88px)}
.duo > :nth-child(2),.trio > :nth-child(2){margin-top:56px}
.ph .dev{width:min(100%,330px);margin-inline:auto}
.cap{max-width:330px;margin:26px auto 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px}
.cap__n{grid-row:span 2;font-size:12px;line-height:1.95;color:var(--graphite);direction:ltr}
.cap__t{font-size:18px;line-height:1.3;font-weight:800;color:var(--frost)}
.cap__d{font-size:15px;line-height:1.5;color:var(--ash)}
.swipe{display:none;font-size:13px;color:var(--graphite);margin-top:14px}

/* מספר גדול */
.stat{display:flex;align-items:flex-end;gap:18px;margin-top:40px}
.stat b{font-size:clamp(72px,9vw,132px);line-height:.82;letter-spacing:-.02em;font-weight:800;color:var(--frost);direction:ltr}
.stat b i{font-style:normal;font-size:.36em;font-weight:600;vertical-align:top;position:relative;top:.16em;margin-inline-end:.08em}
.stat span{font-size:15px;line-height:1.4;color:var(--ash);max-width:13ch;padding-bottom:4px}

/* רמז לגרירה */
.try{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:14px;color:var(--ash)}
.try svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ══════════ אמון: רשימה ממוספרת כמו "מה אנחנו עושים" ══════════ */
.srv__list{margin-top:40px;border-top:1px solid var(--hair);max-width:600px}
.srv{display:grid;grid-template-columns:29px minmax(0,1fr);gap:6px 18px;padding-block:clamp(16px,2.6vh,26px);border-bottom:1px solid var(--hair)}
.srv__n{grid-row:span 2;font-size:10px;color:var(--graphite);direction:ltr;text-align:right;padding-top:.8em}
.srv__t{font-size:clamp(21px,2.2vw,30px);line-height:1.15;letter-spacing:-.01em;font-weight:800;color:var(--frost)}
.srv__d{font-size:16px;line-height:1.55;color:var(--ash)}

/* ══════════ שאלות ══════════ */
.faq{margin-top:clamp(24px,4vh,40px);border-top:1px solid var(--hair-soft)}
.faq__i{border-bottom:1px solid var(--hair-soft)}
.faq__i summary{position:relative;list-style:none;padding-block:24px;padding-inline-end:44px;font-size:clamp(18px,1.6vw,22px);line-height:1.35;font-weight:600;color:var(--frost)}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{content:'+';position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%);font-size:28px;font-weight:300;line-height:1;color:var(--graphite);transition:transform .4s var(--ease)}
.faq__i[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq__a{padding-bottom:26px;font-size:17px;line-height:1.7;color:var(--ash);max-width:62ch}

/* ══════════ חשיפה בגלילה ══════════ */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.rv.is-in{opacity:1;transform:none}

/* ══════════════════════════════════════════════════════
   הטלפון: 399×836, מוקטן לפי הרוחב שהמקום נותן לו (‎--s מה-JS)
   ══════════════════════════════════════════════════════ */
.dev{position:relative;width:100%;aspect-ratio:399/836;--s:.8}
.dev__in{position:absolute;top:0;left:0;width:399px;height:836px;transform:scale(var(--s));transform-origin:0 0}
.dev:not(.is-live) .screen *,.dev:not(.is-live) .screen *::before,.dev:not(.is-live) .screen *::after{animation-play-state:paused !important}

@property --ph-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.phone {
	--bg: #0f0d0b; --cream: #f4ede3; --cream-2: #cbc1b4; --cream-3: #8a8175;
	--clay: #b4532a; --clay-2: #d77a4f; --clay-3: #f0a37c; --clay-deep: #6e2c12; --clay-wash: #f7e8df;
	--ink: #1a1612; --ink-2: #5a524a; --ink-3: #988f85; --paper: #faf6f0; --paper-2: #f2ece3; --card: #fff; --line: #ece5da; --line-2: #e0d6c8;
	--olive: #4f6b34; --olive-2: #7d9a5a; --olive-wash: #ebf0e0;
	--amber: #b97a12; --amber-wash: #f8eddb;
	--display: "Assistant", "Arial Hebrew", sans-serif; --ui: "Assistant", "Arial Hebrew", sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace;
	--ease: cubic-bezier(.2, .8, .2, 1);
	--card-shadow: 0 1px 0 rgba(26, 22, 18, .03), 0 1px 2px rgba(26, 22, 18, .05), 0 10px 24px -14px rgba(60, 35, 15, .22);
}
.phone button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
.phone .ic { inline-size: 20px; block-size: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.phone .m-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.phone .mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
/* ================================================================ the phone */
.phone { position: relative; inline-size: 399px; block-size: 836px; padding: 12px; border-radius: 60px;
	background: linear-gradient(150deg, #3a3430 0%, #141210 28%, #0a0908 60%, #2a2622 100%);
	box-shadow: inset 0 0 0 1.5px #4a433d, inset 0 0 0 4px #0b0a09, 0 0 0 1px rgba(255, 255, 255, .05), 0 60px 110px -40px rgba(0, 0, 0, .95), 0 40px 80px -50px rgba(215, 122, 79, .45);
	transition: transform .6s var(--ease); }
.phone:hover { transform: translateY(-6px); }
.phone::before, .phone::after { content: ''; position: absolute; inline-size: 3px; border-radius: 2px; background: linear-gradient(#3b3530, #191614); }
.phone::before { inset-inline-end: -3px; inset-block-start: 170px; block-size: 64px; }
.phone::after { inset-inline-start: -3px; inset-block-start: 210px; block-size: 96px; }
.phone .screen { position: relative; inline-size: 375px; block-size: 812px; border-radius: 48px; overflow: hidden; background: var(--paper); color: var(--ink); isolation: isolate; font-size: 14px; }
.phone .island { position: absolute; inset-block-start: 11px; inset-inline-start: 50%; transform: translateX(50%); inline-size: 122px; block-size: 35px; border-radius: 20px; background: #000; z-index: 80; }
.phone .sb { position: absolute; inset: 0 0 auto; block-size: 54px; display: flex; align-items: center; justify-content: space-between; padding: 8px 34px 0 30px; font: 600 15.5px/1 var(--ui); z-index: 70; color: var(--ink); }
.phone .sb.light { color: #fff; }
.phone .sb .sys { display: flex; align-items: center; gap: 6px; direction: ltr; }
.phone .bars { display: flex; align-items: flex-end; gap: 1.5px; block-size: 11px; }
.phone .bars i { inline-size: 3px; border-radius: 1px; background: currentColor; }
.phone .bars i:nth-child(1) { block-size: 4px; } .phone .bars i:nth-child(2) { block-size: 6px; } .phone .bars i:nth-child(3) { block-size: 8.5px; } .phone .bars i:nth-child(4) { block-size: 11px; }
.phone .batt { position: relative; inline-size: 25px; block-size: 12px; border-radius: 4px; border: 1.2px solid currentColor; opacity: .95; }
.phone .batt::before { content: ''; position: absolute; inset: 1.5px; inset-inline-end: 6px; border-radius: 2px; background: currentColor; }
.phone .batt::after { content: ''; position: absolute; inset-inline-end: -3.5px; inset-block-start: 3px; inline-size: 2px; block-size: 4px; border-radius: 0 1px 1px 0; background: currentColor; opacity: .5; }
.phone .home-ind { position: absolute; inset-block-end: 8px; inset-inline-start: 50%; transform: translateX(50%); inline-size: 134px; block-size: 5px; border-radius: 3px; background: var(--ink); z-index: 90; }
.phone .home-ind.light { background: rgba(255, 255, 255, .92); }

/* ================================================================ shared app parts */
.phone .app { position: absolute; inset: 0; display: flex; flex-direction: column; padding-block-start: 54px; }
.phone .app-icon { display: grid; place-items: center; border-radius: 23%; color: #fff6ec; font: 700 30px/1 var(--display);
	background: radial-gradient(120% 90% at 30% 15%, #e08a5c 0%, #b4532a 45%, #7d3415 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 6px rgba(70, 20, 5, .35), 0 6px 14px -6px rgba(110, 44, 18, .6); position: relative; }
.phone .app-icon::after { content: ''; position: absolute; inset: 18%; border-radius: 50%; border: 1.5px solid rgba(255, 240, 225, .28); }
.phone .tabbar { position: absolute; inset: auto 0 0; block-size: 90px; padding: 9px 10px 0; display: flex; align-items: flex-start; background: rgba(250, 246, 240, .84); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border-block-start: 1px solid rgba(26, 22, 18, .07); z-index: 30; }
.phone .tab { position: relative; flex: 1; display: grid; justify-items: center; gap: 4px; font: 500 10.5px/1 var(--ui); color: var(--ink-3); }
.phone .tab .ic { inline-size: 24px; block-size: 24px; }
.phone .tab.on { color: var(--ink); }
.phone .tab.on .ic { stroke: var(--clay); stroke-width: 2; }
.phone .tab .badge { position: absolute; inset-block-start: -4px; inset-inline-end: calc(50% - 22px); min-inline-size: 17px; block-size: 17px; padding: 0 4px; border-radius: 9px; background: var(--clay); color: #fff; font: 600 10.5px/17px var(--ui); text-align: center; box-shadow: 0 0 0 2px var(--paper); }
.phone .orb { inline-size: 58px; block-size: 58px; margin-block-start: -24px; border-radius: 50%; display: grid; place-items: center; color: #fff8f0; position: relative;
	background: conic-gradient(from var(--ph-a), #b4532a, #e8a070, #8a3a19, #d77a4f, #f2c09a, #b4532a); animation: ph-orb 9s linear infinite;
	box-shadow: 0 0 0 5px var(--paper), 0 14px 26px -8px rgba(160, 70, 30, .7); }
.phone .orb::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: radial-gradient(70% 55% at 35% 25%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 60%), radial-gradient(circle at 50% 60%, rgba(110, 44, 18, .1), rgba(110, 44, 18, .45)); }
.phone .orb .ic { position: relative; inline-size: 26px; block-size: 26px; stroke-width: 1.8; }
@keyframes ph-orb { to { --ph-a: 360deg; } }
.phone .m-pill { display: inline-flex; align-items: center; gap: 5px; block-size: 22px; padding: 0 9px; border-radius: 11px; font: 600 11.5px/1 var(--ui); white-space: nowrap; }
.phone .m-pill.new { background: var(--clay-wash); color: var(--clay); }
.phone .m-pill.new::before { content: ''; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--clay); animation: ph-ping 1.8s var(--ease) infinite; }
.phone .m-pill.ok { background: var(--olive-wash); color: var(--olive); }
.phone .m-pill.wait { background: var(--amber-wash); color: var(--amber); }
.phone .m-pill.mute { background: var(--paper-2); color: var(--ink-2); }
@keyframes ph-ping { 0% { box-shadow: 0 0 0 0 rgba(180, 83, 42, .5); } 80%, 100% { box-shadow: 0 0 0 7px rgba(180, 83, 42, 0); } }
.phone .switch { inline-size: 46px; block-size: 28px; border-radius: 14px; background: var(--olive); position: relative; flex: none; }
.phone .switch::after { content: ''; position: absolute; inset-block-start: 2px; inset-inline-end: 2px; inline-size: 24px; block-size: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .2); }
.phone .switch.off { background: #ddd5ca; }
.phone .switch.off::after { inset-inline-end: auto; inset-inline-start: 2px; }
.phone .circle-btn { inline-size: 38px; block-size: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--card); box-shadow: var(--card-shadow); color: var(--ink); flex: none; }
.phone .money { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ceramics, drawn: a bowl from above */
.phone .pot { --rim: #efe6d6; --edge: #cbbda6; --wall: #82925a; --glaze: #6b7b42; --pool: #44502a; aspect-ratio: 1; border-radius: 50%; position: relative; flex: none;
	background: radial-gradient(ellipse 34% 20% at 36% 30%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%), radial-gradient(circle closest-side at 52% 54%, var(--pool) 0, var(--glaze) 38%, var(--wall) 73%, var(--edge) 79%, var(--rim) 84%, var(--rim) 95%, var(--edge) 100%);
	box-shadow: 0 10px 18px -9px rgba(40, 25, 10, .5), 0 2px 4px rgba(40, 25, 10, .16); }
.phone .pot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; opacity: .55; mix-blend-mode: multiply;
	background-image: radial-gradient(rgba(30, 20, 10, .35) .7px, transparent 1.3px), radial-gradient(rgba(30, 20, 10, .22) .6px, transparent 1.2px); background-size: 9px 9px, 13px 13px; background-position: 0 0, 5px 7px;
	-webkit-mask: radial-gradient(circle closest-side at 52% 54%, #000 76%, transparent 79%); mask: radial-gradient(circle closest-side at 52% 54%, #000 76%, transparent 79%); }
.phone .pot.char { --wall: #57524d; --glaze: #403c38; --pool: #282522; --rim: #ddd5ca; --edge: #a9a093; }
.phone .pot.sand { --wall: #dccaa9; --glaze: #cfbb95; --pool: #b39d75; --rim: #f4ede1; --edge: #d7c9b1; }
.phone .pot.celadon { --wall: #aec6b4; --glaze: #95b29e; --pool: #6a8a74; --rim: #eef0e6; --edge: #c9cfc0; }
.phone .pot.terra { --wall: #cd7d55; --glaze: #b9653d; --pool: #8a4022; --rim: #ecdac8; --edge: #c8ad94; }
.phone .pot.cobalt { --wall: #4f6f9b; --glaze: #3a5782; --pool: #22395c; --rim: #ebe6dc; --edge: #bdb3a4; }
.phone .photo { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 72% 0%, #fffaf2 0, #f0e5d5 45%, #dac8b0 100%); }
.phone .photo::before { content: ''; position: absolute; inset-inline-start: 18%; inset-block-end: 9%; inline-size: 64%; block-size: 16%; border-radius: 50%; background: rgba(70, 45, 20, .28); filter: blur(10px); }
.phone .photo .pot { position: absolute; inline-size: 60%; inset-inline-start: 20%; inset-block-start: 14%; }
.phone .photo .sprig { position: absolute; inset-inline-end: 8%; inset-block-start: 10%; inline-size: 22%; block-size: 34%; border-radius: 50% 50% 0 50%; background: linear-gradient(140deg, #8fa36a, #56703a); transform: rotate(-24deg); opacity: .85; }
.phone .photo.bad { background: linear-gradient(165deg, #9a948b, #625d56); }
.phone .photo.bad::before { inset-inline-start: 34%; inset-block-end: 16%; background: rgba(0, 0, 0, .45); filter: blur(3px); }
.phone .photo.bad .pot { inline-size: 46%; inset-inline-start: 36%; inset-block-start: 26%; filter: saturate(.5) brightness(.8) contrast(.9) blur(.5px); }
.phone .photo.bad .clutter { position: absolute; inset-inline-start: 6%; inset-block-start: 8%; inline-size: 30%; block-size: 46%; border-radius: 8px; background: linear-gradient(#b3aca2, #8a847b); filter: blur(1.5px); opacity: .8; }

/* ================================================================ 01 lock screen */
.phone .lock { background: #24110a; color: #fff; }
.phone .lock .wall { position: absolute; inset: 0; background:
	radial-gradient(90% 55% at 85% 8%, rgba(232, 140, 92, .95) 0, transparent 60%),
	radial-gradient(80% 50% at 0% 48%, rgba(120, 48, 20, .95) 0, transparent 62%),
	radial-gradient(70% 45% at 75% 100%, rgba(214, 170, 120, .75) 0, transparent 62%),
	linear-gradient(170deg, #9a4220 0%, #4a1d0d 55%, #2a120a 100%); }
.phone .lock .wall::after { content: ''; position: absolute; inline-size: 420px; block-size: 420px; inset-inline-start: -110px; inset-block-end: -150px; border-radius: 50%; opacity: .35; filter: blur(3px);
	background: radial-gradient(circle closest-side at 52% 54%, #3e1a0a 0, #7a3416 40%, #b5643a 72%, #e8c9a8 80%, #f3e4d0 92%, transparent 100%); }
.phone .lock-top { position: relative; padding-block-start: 70px; display: grid; justify-items: center; text-shadow: 0 1px 12px rgba(60, 20, 5, .25); }
.phone .lock-top .ic { inline-size: 18px; block-size: 18px; opacity: .9; }
.phone .lock-date { margin-block-start: 8px; font: 500 18px/1 var(--ui); opacity: .92; }
.phone .lock-time { font: 300 100px/1 var(--display); letter-spacing: -.02em; margin-block-start: 4px; direction: ltr; }
.phone .notes { position: absolute; inset-inline: 10px; inset-block-end: 118px; display: grid; gap: 8px; }
.phone .note { display: flex; gap: 11px; align-items: flex-start; padding: 13px 13px 13px 12px; border-radius: 22px; color: var(--ink);
	background: rgba(250, 244, 236, .74); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 6px 20px -10px rgba(40, 10, 0, .5); animation: ph-drop .8s var(--ease) both; }
.phone .note:nth-child(1) { animation-delay: .7s; } .phone .note:nth-child(2) { animation-delay: .5s; } .phone .note:nth-child(3) { animation-delay: .3s; }
@keyframes ph-drop { from { opacity: 0; transform: translateY(-14px) scale(.98); } }
.phone .note .app-icon { inline-size: 38px; block-size: 38px; font-size: 21px; border-radius: 10px; }
.phone .note .app-icon::after { display: none; }
.phone .n-body { flex: 1; min-inline-size: 0; }
.phone .n-head { display: flex; justify-content: space-between; font-size: 12.5px; color: rgba(26, 22, 18, .6); }
.phone .n-head b { font-weight: 600; color: rgba(26, 22, 18, .75); }
.phone .n-title { font: 600 14.5px/1.3 var(--ui); margin-block-start: 1px; }
.phone .n-text { font-size: 13.5px; line-height: 1.35; color: rgba(26, 22, 18, .78); }
.phone .note .pot { inline-size: 40px; border-radius: 50%; margin-block-start: 6px; }
.phone .note.stacked { position: relative; }
.phone .note.stacked::after { content: ''; position: absolute; inset-inline: 14px; inset-block-end: -7px; block-size: 14px; border-radius: 0 0 18px 18px; background: rgba(250, 244, 236, .42); z-index: -1; }
.phone .lock-bottom { position: absolute; inset-inline: 46px; inset-block-end: 44px; display: flex; justify-content: space-between; }
.phone .lock-bottom span { inline-size: 50px; block-size: 50px; border-radius: 50%; display: grid; place-items: center; background: rgba(30, 10, 2, .32); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.phone .lock-bottom .ic { inline-size: 22px; block-size: 22px; }

/* ================================================================ 02 install */
.phone .install { background: #e9e2d8; }
.phone .site-under { position: absolute; inset: 0; padding-block-start: 54px; filter: blur(1.5px); }
.phone .site-under .bar { margin: 6px 14px 0; block-size: 40px; border-radius: 12px; background: rgba(255, 255, 255, .8); display: flex; align-items: center; justify-content: center; font: 500 14px/1 var(--ui); color: var(--ink-2); gap: 6px; }
.phone .site-under .m-hero { margin: 14px 14px 0; block-size: 330px; border-radius: 18px; overflow: hidden; position: relative; background: linear-gradient(160deg, #efe3d2, #d8c2a6); }
.phone .site-under .m-hero .pot { position: absolute; }
.phone .site-under h3 { position: absolute; inset-block-start: 30px; inset-inline-end: 22px; font: 700 38px/1 var(--display); color: #3a2416; }
.phone .site-under .rows { margin: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.phone .site-under .rows div { block-size: 120px; border-radius: 14px; background: #f4ece1; }
.phone .scrim { position: absolute; inset: 0; background: linear-gradient(rgba(26, 18, 10, .18), rgba(26, 18, 10, .55)); }
.phone .guide { position: absolute; inset-inline: 12px; inset-block-end: 106px; padding: 22px 20px 18px; border-radius: 30px; background: var(--paper); box-shadow: 0 30px 60px -20px rgba(30, 12, 0, .55); animation: ph-drop .8s var(--ease) both .3s; }
.phone .guide .head { display: flex; gap: 14px; align-items: center; }
.phone .guide .app-icon { inline-size: 64px; block-size: 64px; font-size: 34px; border-radius: 16px; }
.phone .guide .head b { display: block; font: 600 17px/1.2 var(--ui); }
.phone .guide .head span { font: 400 13px/1.6 var(--ui); color: var(--ink-3); }
.phone .guide h3 { font: 700 25px/1.15 var(--display); margin-block: 18px 14px; }
.phone .steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.phone .steps li { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; background: var(--card); box-shadow: var(--card-shadow); font-size: 14.5px; }
.phone .steps li::before { counter-increment: s; content: counter(s); inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 700 13px/1 var(--ui); flex: none; }
.phone .steps .key { margin-inline-start: auto; inline-size: 34px; block-size: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--paper-2); color: #2a6fd6; }
.phone .steps .key.plus { color: var(--ink); }
.phone .guide .go { margin-block-start: 14px; inline-size: 100%; block-size: 50px; border-radius: 16px; background: var(--ink); color: var(--paper); font: 600 15.5px/1 var(--ui); }
.phone .safari { position: absolute; inset: auto 0 0; block-size: 88px; padding: 10px 26px 0; display: flex; justify-content: space-between; align-items: flex-start; background: rgba(248, 245, 240, .94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-block-start: 1px solid rgba(0, 0, 0, .06); color: #2a6fd6; }
.phone .safari .ic { inline-size: 24px; block-size: 24px; }
.phone .safari .dim { color: #b8b2aa; }
.phone .point { position: absolute; inset-block-end: 82px; inset-inline-start: 50%; transform: translateX(50%); color: var(--clay); animation: ph-bob 1.4s ease-in-out infinite; z-index: 5; }
.phone .point .ic { inline-size: 26px; block-size: 26px; stroke-width: 2.4; }
@keyframes ph-bob { 50% { transform: translateX(50%) translateY(6px); } }

/* ================================================================ 03 login */
.phone .login .app { padding-block-start: 96px; align-items: center; }
.phone .login .app-icon { inline-size: 76px; block-size: 76px; font-size: 40px; border-radius: 19px; }
.phone .login h3 { font: 700 30px/1.1 var(--display); margin-block-start: 16px; }
.phone .login .sub { color: var(--ink-3); font-size: 14px; margin-block-start: 4px; }
.phone .sent { margin-block-start: 30px; text-align: center; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.phone .sent .mono { color: var(--ink); font-size: 13.5px; }
.phone .otp { display: flex; gap: 8px; margin-block-start: 16px; direction: ltr; }
.phone .otp span { inline-size: 46px; block-size: 58px; border-radius: 14px; background: var(--card); box-shadow: var(--card-shadow), inset 0 0 0 1px var(--line); display: grid; place-items: center; font: 700 28px/1 var(--ui); }
.phone .otp span.on { box-shadow: 0 0 0 2px var(--clay), 0 8px 18px -10px rgba(180, 83, 42, .6); position: relative; }
.phone .otp span.on::after { content: ''; inline-size: 2px; block-size: 26px; background: var(--clay); animation: ph-caret 1s steps(1) infinite; }
@keyframes ph-caret { 50% { opacity: 0; } }
.phone .resend { margin-block-start: 14px; font-size: 13px; color: var(--ink-3); }
.phone .resend .mono { color: var(--ink-2); }
.phone .faceid { margin-block-start: 22px; inline-size: calc(100% - 44px); display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--card); box-shadow: var(--card-shadow); font-size: 14px; }
.phone .faceid .ic { inline-size: 26px; block-size: 26px; color: var(--clay); }
.phone .faceid div { flex: 1; } .phone .faceid small { display: block; color: var(--ink-3); font-size: 12px; }
.phone .powered { margin-block-start: 18px; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); }
.phone .powered i { inline-size: 16px; block-size: 16px; border-radius: 5px; background: #12161c; color: #fff; font: 700 10px/16px var(--ui); text-align: center; font-style: normal; }
.phone .keypad { position: absolute; inset: auto 0 0; padding: 8px 6px 34px; background: #e6dfd5; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px 6px; direction: ltr; }
.phone .keypad span { block-size: 46px; border-radius: 8px; background: #fffdf9; box-shadow: 0 1px 0 rgba(80, 60, 40, .25); display: grid; place-items: center; font: 400 25px/1 var(--ui); color: var(--ink); }
.phone .keypad span small { display: block; font: 600 9px/1 var(--ui); letter-spacing: .14em; color: var(--ink-2); margin-block-start: -6px; }
.phone .keypad span.blank { background: none; box-shadow: none; }
.phone .keypad .ic { inline-size: 24px; block-size: 24px; }

/* ================================================================ 04 today */
.phone .today .app { padding-block-start: 62px; }
.phone .top { display: flex; align-items: flex-start; padding: 6px 20px 0; }
.phone .top .hello { flex: 1; }
.phone .top .day { font-size: 13px; color: var(--ink-3); }
.phone .top h3 { font: 700 30px/1.1 var(--display); margin-block-start: 3px; }
.phone .top .tools { display: flex; gap: 8px; }
.phone .bell { position: relative; }
.phone .bell::after { content: ''; position: absolute; inset-block-start: 8px; inset-inline-end: 9px; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 2px #fff; }
.phone .avatar { inline-size: 38px; block-size: 38px; border-radius: 50%; display: grid; place-items: center; background: #e6d5c3; color: #6e3a1c; font: 600 15px/1 var(--ui); }
.phone .m-hero { position: relative; margin: 18px 16px 0; padding: 18px 18px 14px; border-radius: 26px; color: var(--cream); overflow: hidden;
	background: radial-gradient(90% 80% at 0% 0%, rgba(215, 122, 79, .55), transparent 60%), radial-gradient(60% 60% at 100% 100%, rgba(120, 50, 20, .6), transparent 70%), #1c1612; box-shadow: 0 18px 34px -18px rgba(60, 20, 5, .7); }
.phone .m-hero .lbl { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--cream-2); }
.phone .m-hero .lbl .m-pill { background: rgba(125, 154, 90, .22); color: #c7dda8; }
.phone .m-hero .big { font-size: 46px; line-height: 1; margin-block-start: 8px; }
.phone .m-hero .big small { font-size: 26px; color: var(--cream-2); margin-inline-end: 3px; font-weight: 500; }
.phone .spark { display: block; inline-size: 100%; block-size: 62px; margin-block-start: 6px; }
.phone .mini { display: flex; border-block-start: 1px solid rgba(244, 237, 227, .1); margin-block-start: 8px; padding-block-start: 12px; }
.phone .mini div { flex: 1; } .phone .mini div + div { border-inline-start: 1px solid rgba(244, 237, 227, .1); padding-inline-start: 14px; }
.phone .mini b { display: block; font: 700 21px/1 var(--display); }
.phone .mini span { font-size: 12px; color: var(--cream-3); }
.phone .m-sec { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 20px 10px; }
.phone .m-sec h4 { margin: 0; font: 600 15.5px/1 var(--ui); }
.phone .m-sec a { font-size: 13px; color: var(--clay); }
.phone .todo { display: grid; gap: 8px; padding: 0 16px; }
.phone .todo .row { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 10px; border-radius: 18px; background: var(--card); box-shadow: var(--card-shadow); }
.phone .todo .mark { inline-size: 40px; block-size: 40px; border-radius: 13px; display: grid; place-items: center; flex: none; }
.phone .todo .mark.c { background: var(--clay-wash); color: var(--clay); }
.phone .todo .mark.a { background: var(--amber-wash); color: var(--amber); }
.phone .todo .mark.o { background: var(--olive-wash); color: var(--olive); }
.phone .todo .t { flex: 1; min-inline-size: 0; }
.phone .todo .t b { display: block; font: 600 14.5px/1.3 var(--ui); }
.phone .todo .t span { font-size: 12.5px; color: var(--ink-3); }
.phone .todo .chev { color: var(--ink-3); inline-size: 18px; block-size: 18px; }
.phone .todo .ba { display: flex; flex: none; }
.phone .todo .ba .photo { inline-size: 34px; block-size: 34px; border-radius: 9px; box-shadow: 0 0 0 2px #fff; }
.phone .todo .ba .photo + .photo { margin-inline-start: -10px; }
.phone .quick { display: flex; gap: 8px; padding: 14px 16px 0; overflow: hidden; }
.phone .quick span { display: inline-flex; align-items: center; gap: 7px; padding: 10px 13px; border-radius: 14px; background: var(--paper-2); font: 500 13px/1 var(--ui); white-space: nowrap; color: var(--ink-2); }
.phone .quick .ic { inline-size: 17px; block-size: 17px; color: var(--clay); }

/* ================================================================ 05 chat */
.phone .chat .app { background: var(--paper); }
.phone .c-head { display: flex; align-items: center; gap: 10px; padding: 6px 14px 12px; border-block-end: 1px solid var(--line); background: rgba(250, 246, 240, .9); z-index: 2; }
.phone .c-head .back { color: var(--ink-2); }
.phone .c-head .orb { inline-size: 38px; block-size: 38px; margin: 0; box-shadow: 0 6px 14px -6px rgba(160, 70, 30, .6); }
.phone .c-head .orb .ic { inline-size: 18px; block-size: 18px; }
.phone .c-head .who { flex: 1; }
.phone .c-head b { display: block; font: 600 15.5px/1.2 var(--ui); }
.phone .c-head span { font-size: 12px; color: var(--olive); display: inline-flex; align-items: center; gap: 5px; }
.phone .c-head span::before { content: ''; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--olive-2); }
.phone .thread { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 12px 12px 10px; }
.phone .thread > * { flex-shrink: 0; }
.phone .msg { max-inline-size: 84%; }
.phone .msg.me { align-self: flex-end; }
.phone .msg.me .bub { background: var(--ink); color: var(--cream); border-radius: 20px 20px 20px 6px; padding: 6px; }
.phone .msg.me .bub p { padding: 6px 8px 4px; font-size: 14.5px; line-height: 1.45; }
.phone .msg.me .photo { inline-size: 200px; block-size: 138px; border-radius: 15px; }
.phone .msg .time { font-size: 11px; color: var(--ink-3); margin-block-start: 3px; text-align: end; }
.phone .msg.bot { align-self: flex-start; }
.phone .work { display: grid; gap: 7px; padding: 11px 13px; border-radius: 18px 18px 6px 18px; background: var(--card); box-shadow: var(--card-shadow); font-size: 13px; color: var(--ink-2); }
.phone .work div { display: flex; align-items: center; gap: 8px; }
.phone .work .ic { inline-size: 15px; block-size: 15px; color: var(--olive); stroke-width: 2.4; }
.phone .work .m-ltr { color: var(--ink); font-weight: 600; }
.phone .m-say { margin-block-start: 6px; padding: 10px 13px; border-radius: 18px 6px 18px 18px; background: var(--card); box-shadow: var(--card-shadow); font-size: 14.5px; line-height: 1.45; }
.phone .approve { align-self: stretch; border-radius: 24px; background: var(--card); box-shadow: 0 0 0 1px rgba(180, 83, 42, .14), 0 24px 40px -22px rgba(110, 44, 18, .45); overflow: hidden; animation: ph-glow 3s ease-in-out infinite; }
@keyframes ph-glow { 50% { box-shadow: 0 0 0 1px rgba(180, 83, 42, .3), 0 24px 44px -20px rgba(180, 83, 42, .55); } }
.phone .ba-wrap { position: relative; block-size: 178px; margin-inline: 10px; border-radius: 16px; overflow: hidden; user-select: none; touch-action: none; cursor: ew-resize; --pos: 50%; }
.phone .ap-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 10px; }
.phone .ap-head b { font: 700 17px/1.2 var(--display); }
.phone .ap-head span:last-child { margin-inline-start: auto; font-size: 11.5px; color: var(--ink-3); }
.phone .ba-wrap .layer { position: absolute; inset: 0; }
.phone .ba-wrap .layer .photo { position: absolute; inset: 0; }
.phone .ba-wrap .layer.before { clip-path: inset(0 0 0 var(--pos)); }
.phone .ba-wrap .photo .pot { inline-size: 46%; inset-inline-start: 27%; inset-block-start: 12%; }
.phone .ba-wrap .photo.bad .pot { inline-size: 36%; inset-inline-start: 40%; inset-block-start: 22%; }
.phone .tagp { position: absolute; inset-block-end: 12px; padding: 6px 10px; border-radius: 11px; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 12px -4px rgba(26, 22, 18, .3); }
.phone .tagp .money { font-size: 19px; color: var(--ink); }
.phone .tagp.l { left: 14px; } .phone .tagp.r { right: 14px; }
.phone .before .tagp .money { color: var(--ink-2); }
.phone .ba-tag { position: absolute; inset-block-start: 12px; padding: 4px 9px; border-radius: 8px; font: 600 11px/1.2 var(--ui); background: rgba(26, 22, 18, .72); color: #fff; backdrop-filter: blur(6px); z-index: 3; }
.phone .ba-tag.l { left: 14px; background: rgba(79, 107, 52, .92); }
.phone .ba-tag.r { right: 14px; }
.phone .ba-line { position: absolute; inset-block: 0; left: var(--pos); inline-size: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(26, 22, 18, .12); z-index: 4; }
.phone .ba-line::after { content: ''; position: absolute; top: 50%; left: 50%; inline-size: 34px; block-size: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgba(26, 22, 18, .25);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1612' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E"); background-size: 18px; background-repeat: no-repeat; background-position: center; }
.phone .diff { padding: 12px 14px 4px; display: grid; gap: 8px; }
.phone .diff div { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.phone .diff div b { font-weight: 600; color: var(--ink); }
.phone .diff .ic { inline-size: 16px; block-size: 16px; color: var(--clay); }
.phone .diff .m-ltr { margin-inline-start: auto; font: 700 14px/1 var(--ui); color: var(--ink); }
.phone .diff .m-ltr s { color: var(--ink-3); font-weight: 400; margin-inline-end: 4px; }
.phone .acts { display: flex; gap: 8px; padding: 10px 12px 12px; }
.phone .acts .pri { flex: 1; block-size: 46px; border-radius: 15px; background: var(--clay); color: #fff; font: 600 15px/1 var(--ui); display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 10px 20px -10px rgba(180, 83, 42, .8), inset 0 1px 0 rgba(255, 255, 255, .25); }
.phone .acts .sec-b { inline-size: 46px; block-size: 46px; border-radius: 15px; background: var(--paper-2); display: grid; place-items: center; color: var(--ink-2); }
.phone .undo-hint { font-size: 11.5px; color: var(--ink-3); text-align: center; padding-block-end: 2px; }
.phone .compose { display: flex; align-items: center; gap: 8px; padding: 8px 12px 32px; background: var(--paper); border-block-start: 1px solid var(--line); }
.phone .compose .field { flex: 1; block-size: 42px; border-radius: 21px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); display: flex; align-items: center; padding: 0 14px; color: var(--ink-3); font-size: 14.5px; }
.phone .compose .mic { inline-size: 42px; block-size: 42px; border-radius: 50%; background: var(--clay); color: #fff; display: grid; place-items: center; }
.phone .compose .cam { color: var(--ink-2); inline-size: 34px; display: grid; place-items: center; }

/* ================================================================ 06 orders */
.phone .big-title { display: flex; align-items: center; gap: 8px; padding: 10px 20px 0; }
.phone .big-title h3 { flex: 1; font: 800 34px/1 var(--display); letter-spacing: -.02em; }
.phone .seg { display: flex; margin: 16px 16px 0; padding: 3px; border-radius: 13px; background: var(--paper-2); }
.phone .seg button { flex: 1; block-size: 34px; border-radius: 10px; font: 500 13px/1 var(--ui); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; gap: 5px; transition: background .25s, color .25s; }
.phone .seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(26, 22, 18, .12); font-weight: 600; }
.phone .seg button i { font: 700 12px/1 var(--ui); font-style: normal; color: var(--clay); }
.phone .sum { display: flex; justify-content: space-between; padding: 14px 20px 8px; font-size: 13px; color: var(--ink-3); }
.phone .sum b { color: var(--ink); font-weight: 600; }
.phone .olist { display: grid; gap: 9px; padding: 0 16px; }
.phone .ocard { position: relative; border-radius: 20px; overflow: hidden; }
.phone .ocard .face { position: relative; display: grid; gap: 10px; padding: 13px 14px; background: var(--card); box-shadow: var(--card-shadow); border-radius: 20px; z-index: 1; }
.phone .ocard .r1 { display: flex; align-items: center; gap: 8px; }
.phone .ocard .r1 .mono { font-size: 12.5px; color: var(--ink-3); }
.phone .ocard .r1 .when { margin-inline-start: auto; font-size: 12px; color: var(--ink-3); }
.phone .ocard .r2 { display: flex; align-items: center; gap: 10px; }
.phone .ocard .r2 b { flex: 1; font: 600 15.5px/1.2 var(--ui); }
.phone .ocard .r2 .money { font-size: 21px; }
.phone .ocard .r3 { display: flex; align-items: center; gap: 8px; }
.phone .thumbs { display: flex; }
.phone .thumbs .pot { inline-size: 32px; box-shadow: 0 0 0 2px #fff, 0 4px 8px -4px rgba(40, 25, 10, .5); }
.phone .thumbs .pot + .pot { margin-inline-start: -8px; }
.phone .ocard .r3 span { font-size: 12.5px; color: var(--ink-3); }
.phone .ocard .ship { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2); }
.phone .ocard .ship .ic { inline-size: 15px; block-size: 15px; }
.phone .ocard.swiped .face { transform: translateX(-96px); box-shadow: 8px 0 18px -10px rgba(26, 22, 18, .25); }
.phone .ocard.swiped .under { position: absolute; inset: 0; display: flex; justify-content: flex-start; align-items: center; padding-inline-start: 24px; background: var(--olive); color: #fff; font: 600 12.5px/1.2 var(--ui); border-radius: 20px; }
.phone .ocard.swiped .under div { display: grid; justify-items: center; gap: 4px; }
.phone .ocard.swiped .under .ic { inline-size: 22px; block-size: 22px; stroke-width: 2.2; }

/* ================================================================ 07 order */
.phone .o-head { display: flex; align-items: center; gap: 10px; padding: 6px 14px 4px; }
.phone .o-head .t { flex: 1; text-align: center; }
.phone .o-head .t b { display: block; font: 600 16px/1.2 var(--mono); }
.phone .o-head .t span { font-size: 12px; color: var(--ink-3); }
.phone .scroll { flex: 1; overflow: hidden; padding: 6px 16px 110px; display: grid; align-content: start; gap: 10px; }
.phone .stepper { display: flex; align-items: flex-start; padding: 12px 6px 6px; }
.phone .stepper .st { flex: 1; display: grid; justify-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-3); position: relative; }
.phone .stepper .st::before { content: ''; position: absolute; inset-block-start: 11px; inset-inline-start: 50%; inline-size: 100%; block-size: 2px; background: var(--line-2); z-index: 0; }
.phone .stepper .st:last-child::before { display: none; }
.phone .stepper .st.done::before { background: var(--olive-2); }
.phone .stepper .dot { position: relative; z-index: 1; inline-size: 24px; block-size: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line-2); }
.phone .stepper .done .dot { background: var(--olive); box-shadow: none; color: #fff; }
.phone .stepper .done .dot .ic { inline-size: 13px; block-size: 13px; stroke-width: 3; }
.phone .stepper .now { color: var(--ink); font-weight: 600; }
.phone .stepper .now .dot { box-shadow: inset 0 0 0 2px var(--clay); }
.phone .stepper .now .dot::after { content: ''; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--clay); animation: ph-ping 1.8s var(--ease) infinite; }
.phone .box { border-radius: 20px; background: var(--card); box-shadow: var(--card-shadow); padding: 14px; }
.phone .cust { display: flex; align-items: center; gap: 12px; }
.phone .cust .avatar { inline-size: 46px; block-size: 46px; background: #e9dccd; font-size: 16px; }
.phone .cust div { flex: 1; }
.phone .cust b { display: block; font: 600 16px/1.2 var(--ui); }
.phone .cust span { font-size: 12.5px; color: var(--ink-3); }
.phone .cust .gold { color: var(--amber); font-weight: 600; }
.phone .reach { display: flex; gap: 8px; margin-block-start: 12px; }
.phone .reach span { flex: 1; block-size: 40px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 13px/1 var(--ui); background: var(--paper-2); color: var(--ink); }
.phone .reach span.wa { background: #e5f3ea; color: #1f7a45; }
.phone .reach .ic { inline-size: 17px; block-size: 17px; }
.phone .items .it { display: flex; align-items: center; gap: 12px; padding-block: 6px; }
.phone .items .it + .it { border-block-start: 1px solid var(--line); padding-block-start: 12px; margin-block-start: 6px; }
.phone .items .pot { inline-size: 44px; }
.phone .items .it div { flex: 1; }
.phone .items b { display: block; font: 600 14px/1.25 var(--ui); }
.phone .items span { font-size: 12px; color: var(--ink-3); }
.phone .items .money { font-size: 17px; }
.phone .totals { display: grid; gap: 6px; margin-block-start: 10px; padding-block-start: 10px; border-block-start: 1px dashed var(--line-2); font-size: 13px; color: var(--ink-2); }
.phone .totals div { display: flex; justify-content: space-between; }
.phone .totals .code { font: 500 11.5px/1 var(--mono); padding: 3px 6px; border-radius: 6px; background: var(--clay-wash); color: var(--clay); margin-inline-start: 6px; }
.phone .totals .grand { margin-block-start: 4px; font: 600 15px/1 var(--ui); color: var(--ink); align-items: baseline; }
.phone .totals .grand .money { font-size: 24px; }
.phone .addr { padding: 0; overflow: hidden; }
.phone .map { block-size: 92px; position: relative; background:
	radial-gradient(40px 26px at 22% 70%, #d5dfc4 0 98%, transparent 100%),
	repeating-linear-gradient(28deg, transparent 0 30px, #fbf8f3 30px 37px),
	repeating-linear-gradient(-62deg, transparent 0 46px, #fbf8f3 46px 54px), #e9e2d6; }
.phone .map .m-pin { position: absolute; inset-inline-start: 56%; inset-block-start: 20px; color: var(--clay); filter: drop-shadow(0 4px 6px rgba(110, 44, 18, .4)); }
.phone .map .m-pin .ic { inline-size: 30px; block-size: 30px; fill: var(--clay); stroke: #fff; stroke-width: 1.4; }
.phone .addr .row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.phone .addr .row div { flex: 1; } .phone .addr b { display: block; font: 600 14px/1.3 var(--ui); } .phone .addr span { font-size: 12.5px; color: var(--ink-3); }
.phone .addr .m-nav { padding: 8px 12px; border-radius: 11px; background: var(--paper-2); font: 600 12.5px/1 var(--ui); display: inline-flex; gap: 5px; align-items: center; }
.phone .addr .m-nav .ic { inline-size: 15px; block-size: 15px; }
.phone .quote { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); border-inline-start: 3px solid var(--clay-3); padding: 2px 10px; margin: 0; }
.phone .dock { position: absolute; inset: auto 0 0; padding: 12px 14px 32px; display: flex; gap: 8px; background: linear-gradient(rgba(250, 246, 240, 0), var(--paper) 30%); z-index: 20; }
.phone .dock .pri { flex: 1; block-size: 52px; border-radius: 17px; background: var(--ink); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; gap: 9px; font: 600 15.5px/1 var(--ui); box-shadow: 0 14px 26px -14px rgba(26, 22, 18, .8); }
.phone .dock .pri .ic { color: var(--clay-3); }
.phone .dock .m-more { inline-size: 52px; block-size: 52px; border-radius: 17px; background: var(--card); box-shadow: var(--card-shadow); display: grid; place-items: center; }

/* ================================================================ 08 product */
.phone .product { background: var(--paper); }
.phone .p-photo { position: absolute; inset: 0 0 auto; block-size: 372px; }
.phone .p-photo .photo { position: absolute; inset: 0; }
.phone .p-photo .photo .pot { inline-size: 56%; inset-inline-start: 22%; inset-block-start: 22%; }
.phone .p-photo .ctl { position: absolute; inset-block-start: 58px; inset-inline: 16px; display: flex; justify-content: space-between; z-index: 3; }
.phone .p-photo .ctl .circle-btn { background: rgba(255, 255, 255, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.phone .p-photo .shoot { position: absolute; inset-inline-start: 16px; inset-block-end: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 14px; background: rgba(26, 22, 18, .78); color: #fff; font: 600 13px/1 var(--ui); backdrop-filter: blur(10px); z-index: 3; }
.phone .p-photo .shoot .ic { inline-size: 17px; block-size: 17px; }
.phone .p-photo .count { position: absolute; inset-inline-end: 16px; inset-block-end: 44px; display: flex; gap: 5px; z-index: 3; }
.phone .p-photo .count i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.phone .p-photo .count i:first-child { inline-size: 20px; border-radius: 4px; background: #fff; }
.phone .p-sheet { position: absolute; inset: 344px 0 0; border-radius: 28px 28px 0 0; background: var(--paper); padding: 20px 16px 120px; display: grid; align-content: start; gap: 10px; box-shadow: 0 -10px 30px -18px rgba(40, 20, 5, .4); z-index: 4; }
.phone .p-name { display: flex; align-items: center; gap: 10px; }
.phone .p-name h3 { flex: 1; font: 700 27px/1.1 var(--display); }
.phone .p-name .m-pill { block-size: 26px; }
.phone .ai-chip { display: inline-flex; align-items: center; gap: 7px; justify-self: start; padding: 8px 12px; border-radius: 12px; font: 500 13px/1 var(--ui); color: var(--clay); background: linear-gradient(90deg, var(--clay-wash), #fbf0e9); box-shadow: inset 0 0 0 1px rgba(180, 83, 42, .16); }
.phone .ai-chip .ic { inline-size: 16px; block-size: 16px; }
.phone .group { border-radius: 20px; background: var(--card); box-shadow: var(--card-shadow); }
.phone .group .m-line { display: flex; align-items: center; gap: 12px; padding: 13px 14px; }
.phone .group .m-line + .m-line { border-block-start: 1px solid var(--line); }
.phone .group .lab { font-size: 12.5px; color: var(--ink-3); display: block; }
.phone .group .grow { flex: 1; }
.phone .group .price .money { font-size: 30px; line-height: 1.1; }
.phone .sale { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.phone .stock { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 13px; background: var(--paper-2); }
.phone .stock span { inline-size: 32px; block-size: 32px; border-radius: 10px; display: grid; place-items: center; background: #fff; box-shadow: 0 1px 2px rgba(26, 22, 18, .1); }
.phone .stock span .ic { inline-size: 16px; block-size: 16px; }
.phone .stock b { min-inline-size: 34px; text-align: center; font: 700 19px/1 var(--display); }
.phone .scan { inline-size: 40px; block-size: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ink); color: #fff; }
.phone .sku { font: 500 13px/1 var(--ui); letter-spacing: .02em; color: var(--ink-2); }
.phone .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.phone .tags span { padding: 7px 11px; border-radius: 10px; background: var(--paper-2); font-size: 12.5px; color: var(--ink-2); }
.phone .tags span.add { background: none; box-shadow: inset 0 0 0 1px dashed var(--line-2); border: 1px dashed var(--line-2); color: var(--ink-3); }
.phone .savebar { position: absolute; inset: auto 12px 30px; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 20px; background: #1c1612; color: var(--cream); box-shadow: 0 20px 34px -16px rgba(30, 12, 0, .8); z-index: 10; animation: ph-drop .7s var(--ease) both .4s; }
.phone .savebar div { flex: 1; font-size: 13px; color: var(--cream-2); }
.phone .savebar div b { color: var(--cream); font-weight: 600; display: block; font-size: 14px; }
.phone .savebar span { padding: 12px 18px; border-radius: 14px; background: var(--clay); color: #fff; font: 600 14px/1 var(--ui); }

/* ================================================================ 09 scanner */
.phone .scanner { background: #0d0b0a; color: #fff; }
.phone .feed { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(80% 50% at 50% 40%, #5a4a3c, #1e1814 70%); }
.phone .feed .shelf { position: absolute; inset-inline: -20px; block-size: 14px; background: linear-gradient(#8a7055, #5c4936); box-shadow: 0 12px 30px rgba(0, 0, 0, .6); }
.phone .feed .pot { position: absolute; filter: blur(2.5px) brightness(.75); }
.phone .feed::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 45% at 50% 44%, transparent 40%, rgba(0, 0, 0, .65) 100%); }
.phone .s-top { position: absolute; inset-block-start: 58px; inset-inline: 16px; display: flex; align-items: center; justify-content: space-between; z-index: 5; }
.phone .s-top .circle-btn { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; backdrop-filter: blur(10px); }
.phone .s-top b { font: 600 16px/1 var(--ui); }
.phone .m-frame { position: absolute; inset-block-start: 196px; inset-inline-start: 50%; transform: translateX(50%); inline-size: 260px; block-size: 170px; z-index: 5; }
.phone .m-frame i { position: absolute; inline-size: 34px; block-size: 34px; border: 4px solid var(--clay-3); }
.phone .m-frame i:nth-child(1) { inset-block-start: 0; inset-inline-start: 0; border-inline-end: 0; border-block-end: 0; border-start-start-radius: 16px; }
.phone .m-frame i:nth-child(2) { inset-block-start: 0; inset-inline-end: 0; border-inline-start: 0; border-block-end: 0; border-start-end-radius: 16px; }
.phone .m-frame i:nth-child(3) { inset-block-end: 0; inset-inline-start: 0; border-inline-end: 0; border-block-start: 0; border-end-start-radius: 16px; }
.phone .m-frame i:nth-child(4) { inset-block-end: 0; inset-inline-end: 0; border-inline-start: 0; border-block-start: 0; border-end-end-radius: 16px; }
.phone .label { position: absolute; inset: 34px 36px; border-radius: 8px; background: #f3ede2; transform: rotate(-3deg); box-shadow: 0 10px 20px rgba(0, 0, 0, .5); display: grid; align-content: center; justify-items: center; gap: 6px; }
.phone .label .code { inline-size: 150px; block-size: 52px; background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 4px, #111 4px 5px, transparent 5px 8px, #111 8px 11px, transparent 11px 12px, #111 12px 13px, transparent 13px 16px); }
.phone .label .mono { font-size: 10px; color: #333; letter-spacing: .12em; }
.phone .laser { position: absolute; inset-inline: 14px; block-size: 2px; inset-block-start: 50%; background: linear-gradient(90deg, transparent, var(--clay-3), transparent); box-shadow: 0 0 14px 2px rgba(240, 163, 124, .8); animation: ph-sweep 2.2s ease-in-out infinite; }
@keyframes ph-sweep { 0%, 100% { transform: translateY(-58px); } 50% { transform: translateY(58px); } }
.phone .found { position: absolute; inset-block-start: 380px; inset-inline-start: 50%; transform: translateX(50%); display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 12px; background: rgba(79, 107, 52, .92); font: 600 13px/1 var(--ui); white-space: nowrap; z-index: 5; animation: ph-drop .6s var(--ease) both .9s; }
.phone .found .ic { inline-size: 16px; block-size: 16px; stroke-width: 2.6; }
.phone .result { position: absolute; inset: auto 10px 96px; padding: 16px; border-radius: 28px; background: var(--paper); color: var(--ink); box-shadow: 0 -10px 40px rgba(0, 0, 0, .4); z-index: 6; }
.phone .result .head { display: flex; gap: 12px; align-items: center; }
.phone .result .pot { inline-size: 54px; }
.phone .result .head div { flex: 1; } .phone .result b { display: block; font: 700 21px/1.15 var(--display); } .phone .result .sku { font-size: 11.5px; }
.phone .result .cnt { display: flex; align-items: center; gap: 14px; margin-block-start: 14px; padding: 12px; border-radius: 18px; background: var(--paper-2); }
.phone .result .cnt .from { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.phone .result .cnt .from b { font: 700 18px/1 var(--display); color: var(--ink-2); display: inline; }
.phone .result .cnt .arrow { color: var(--ink-3); }
.phone .result .cnt .to { font: 700 40px/1 var(--display); color: var(--olive); }
.phone .result .cnt .plus { margin-inline-start: auto; inline-size: 56px; block-size: 56px; border-radius: 18px; background: var(--olive); color: #fff; display: grid; place-items: center; font: 700 17px/1 var(--ui); box-shadow: 0 10px 20px -10px rgba(79, 107, 52, .9); }
.phone .modes { position: absolute; inset: auto 0 34px; display: flex; justify-content: center; gap: 22px; font: 600 13px/1 var(--ui); color: rgba(255, 255, 255, .5); z-index: 6; }
.phone .modes .on { color: #fff; position: relative; }
.phone .modes .on::after { content: ''; position: absolute; inset-block-end: -9px; inset-inline-start: 50%; inline-size: 5px; block-size: 5px; margin-inline-start: -2.5px; border-radius: 50%; background: var(--clay-3); }


/* ================================================================ content, editor, leads, more */
.phone .new-btn { display: inline-flex; align-items: center; gap: 5px; block-size: 38px; padding: 0 13px; border-radius: 19px; background: var(--ink); color: var(--paper); font: 600 13.5px/1 var(--ui); }
.phone .new-btn .ic { inline-size: 17px; block-size: 17px; stroke-width: 2.2; }
.phone .types { display: flex; gap: 8px; padding: 16px 16px 0; overflow: hidden; }
.phone .types span { flex: none; display: grid; gap: 2px; padding: 10px 14px; border-radius: 16px; background: var(--card); box-shadow: var(--card-shadow); min-inline-size: 84px; }
.phone .types b { font: 700 14.5px/1.2 var(--ui); }
.phone .types i { font: 500 12px/1 var(--ui); font-style: normal; color: var(--ink-3); }
.phone .types span.on { background: var(--ink); color: var(--paper); box-shadow: 0 10px 20px -12px rgba(26, 22, 18, .7); }
.phone .types span.on i { color: var(--clay-3); }
.phone .clist { display: grid; gap: 8px; padding: 12px 16px 0; }
.phone .citem { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 18px; background: var(--card); box-shadow: var(--card-shadow); }
.phone .citem .th { inline-size: 54px; block-size: 54px; border-radius: 14px; flex: none; }
.phone .citem .th .pot { inline-size: 70%; inset-inline-start: 15%; inset-block-start: 12%; }
.phone .citem .t { flex: 1; min-inline-size: 0; }
.phone .citem b { display: block; font: 700 14.5px/1.3 var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone .citem .t span { display: flex; align-items: center; gap: 5px; margin-block-start: 3px; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; }
.phone .citem .t .ic { inline-size: 14px; block-size: 14px; }
.phone .kind { font-family: var(--ui) !important; font-weight: 700 !important; }
.phone .ed { gap: 10px; padding-block-start: 4px; }
.phone .ed-cover { position: relative; block-size: 150px; border-radius: 20px; }
.phone .ed-cover .pot { inline-size: 40%; inset-inline-start: 30%; inset-block-start: 10%; }
.phone .ed-cover .swap { position: absolute; inset-inline-start: 10px; inset-block-end: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: rgba(26, 22, 18, .75); color: #fff; font: 600 12.5px/1 var(--ui); backdrop-filter: blur(8px); }
.phone .ed-cover .swap .ic { inline-size: 15px; block-size: 15px; }
.phone .ed-title { font: 800 26px/1.15 var(--ui); letter-spacing: -.01em; padding: 4px 4px 2px; }
.phone .group .m-line .m-lead { color: var(--clay); inline-size: 20px; block-size: 20px; }
.phone .group .m-line b { font: 600 15px/1.3 var(--ui); }
.phone .group .m-line .chev { color: var(--ink-3); inline-size: 18px; block-size: 18px; }
.phone .group .m-line.col { flex-direction: column; align-items: stretch; gap: 8px; }
.phone .taken { color: var(--amber); font-weight: 600; }
.phone .seg.mini { margin: 0; }
.phone .seg.mini button { block-size: 30px; font-size: 12.5px; }
.phone .rich { padding: 10px 14px 14px; }
.phone .rich .tools { display: flex; align-items: center; gap: 14px; padding-block-end: 10px; border-block-end: 1px solid var(--line); color: var(--ink-2); font: 700 15px/1 var(--ui); }
.phone .rich .tools i { font-style: italic; font-family: Georgia, serif; }
.phone .rich .tools .ic { inline-size: 18px; block-size: 18px; }
.phone .ai-mini { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 10px; background: var(--clay-wash); color: var(--clay); font: 600 12px/1 var(--ui); }
.phone .ai-mini .ic { inline-size: 14px !important; block-size: 14px !important; }
.phone .rich p { margin-block-start: 10px; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.phone .big-title .circle-btn:first-child { margin-inline-end: 2px; }
.phone .llist { display: grid; gap: 9px; padding: 14px 16px 0; }
.phone .lcard { padding: 13px 14px; border-radius: 20px; background: var(--card); box-shadow: var(--card-shadow); display: grid; gap: 6px; }
.phone .lcard.hot { box-shadow: 0 0 0 1.5px rgba(180, 83, 42, .3), 0 18px 30px -18px rgba(110, 44, 18, .5); }
.phone .lcard .r1 { display: flex; align-items: center; justify-content: space-between; }
.phone .lcard .when { font-size: 12px; color: var(--ink-3); }
.phone .src { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 9px; background: var(--paper-2); font: 600 11.5px/1 var(--ui); color: var(--ink-2); }
.phone .src .ic { inline-size: 13px; block-size: 13px; }
.phone .src.bot { background: var(--clay-wash); color: var(--clay); }
.phone .lcard > b { font: 700 16px/1.25 var(--ui); }
.phone .lcard p { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.phone .lcard .sum { display: flex; gap: 8px; padding: 10px 11px; border-radius: 13px; background: linear-gradient(90deg, var(--clay-wash), #fbf2ec); font-size: 13px; line-height: 1.5; color: var(--ink); }
.phone .lcard .sum .ic { inline-size: 16px; block-size: 16px; color: var(--clay); margin-block-start: 2px; }
.phone .lcard .reach { margin-block-start: 4px; }
.phone .lcard .reach .done { background: var(--olive-wash); color: var(--olive); }
.phone .me { display: flex; align-items: center; gap: 12px; padding: 14px 20px 6px; }
.phone .me .avatar { inline-size: 52px; block-size: 52px; font-size: 20px; }
.phone .me div { flex: 1; } .phone .me b { display: block; font: 800 20px/1.2 var(--ui); } .phone .me span { font-size: 13px; color: var(--ink-3); }
.phone .me .health { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 11px; background: var(--olive-wash); color: var(--olive); font: 600 12px/1 var(--ui); }
.phone .me .health .ic { inline-size: 15px; block-size: 15px; }
.phone .menu { display: grid; gap: 12px; padding: 12px 16px 0; }
.phone .menu .m-line { padding: 11px 14px; }
.phone .mi { inline-size: 34px; block-size: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--paper-2); color: var(--ink-2); flex: none; }
.phone .mi.c { background: var(--clay-wash); color: var(--clay); }
.phone .mi .ic { inline-size: 18px; block-size: 18px; }
.phone .menu .lab { margin-block-start: 2px; }
.phone .cnt { min-inline-size: 22px; block-size: 22px; padding: 0 6px; border-radius: 11px; background: var(--clay); color: #fff; font: 700 12px/22px var(--ui); font-style: normal; text-align: center; }
.phone .cnt.mute { background: var(--paper-2); color: var(--ink-2); }
.phone .quiet { color: var(--ink-2) !important; font-weight: 500 !important; }
.phone .tab .badge.dot { min-inline-size: 9px; block-size: 9px; padding: 0; inset-block-start: -1px; inset-inline-end: calc(50% - 15px); }

/* במוקאפ הפונט הוגדר על ה-body; כאן הוא מוגדר על הטלפון עצמו, כך שהאפליקציה נשארת ב-Assistant */
.phone{font-family:var(--ui);color:var(--ink);text-align:start;line-height:normal}
@media (hover:hover) and (pointer:fine){.phone button{cursor:none}}

/* הטלפון על הכחול של ברנדלה: צל כחול־לילה במקום הזוהר החמרי של חלון התצוגה */
.phone{box-shadow:inset 0 0 0 1.5px #4a433d,inset 0 0 0 4px #0b0a09,0 0 0 1px rgba(255,255,255,.08),
  0 70px 110px -50px rgba(1,10,30,.95),0 30px 60px -36px rgba(1,10,30,.7)}


/* הטלפונים: הפונטים שלהם חזקים מ-font-family:inherit של landing.css */
.appl .phone .mono{font-family:var(--mono)}
.appl .phone .money{font-family:var(--display)}
.appl .phone .kind{font-family:var(--ui) !important}
.appl .phone .rich .tools i{font-family:Georgia, serif}
.appl .phone{font-family:var(--ui)}

/* ══════════ רספונסיבי ══════════ */
@media (max-width:1200px){
  .feat--wide{grid-template-columns:minmax(0,1fr)}
  .feat--wide .feat__media{width:100%;max-width:720px;margin-inline:auto}
}
@media (max-width:1040px){
  .split{grid-template-columns:minmax(0,1fr)}
  .split .duo{width:100%;max-width:720px;margin-inline:auto}
}
@media (max-width:900px){
  .opening{min-height:0;padding-block:104px 56px}
  .opening__in{grid-template-columns:minmax(0,1fr);gap:48px}
  .opening__txt{min-width:0}
  .stack{width:min(100%,420px)}
  .stack .dev--front{width:64%;inset-inline-start:0}
  .stack .dev--back{width:54%;top:13%}
  #bmark{top:61%}
  .cue{display:none}
  .sec__hd{flex-direction:column;align-items:stretch;gap:28px}
  .sec__hd > div{flex:none}
  .sec__hd .p-lead{flex:none;max-width:min(44ch,100%)}
  .feat{grid-template-columns:minmax(0,1fr);gap:48px}
  .feat--flip .feat__media{order:0}
  .feat__media > .dev{width:min(80%,330px)}
  .split{margin-top:40px;gap:40px}
  /* קבוצות טלפונים: רצועה שמחליקים בה, מקצה לקצה, כמו התיק בעמוד הבית.
     השוליים השליליים שווים בדיוק לריפוד, כך שהרצועה ברוחב המסך ולא יותר. */
  .duo,.trio,.split .duo,.feat--wide .duo{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;width:auto;max-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);padding-bottom:6px}
  .duo::-webkit-scrollbar,.trio::-webkit-scrollbar{display:none}
  .duo > *,.trio > *{flex:0 0 min(72vw,300px);min-width:0;scroll-snap-align:start;margin-top:0 !important}
  .feat--wide .feat__media{max-width:none}
  .trio{margin-top:40px}
  .ph .dev{width:100%}
  .cap{margin-top:18px}
  .swipe{display:block}
  .ticks{margin-top:28px}
  .stat{margin-top:32px}
}
@media (max-width:600px){
  .display{font-size:clamp(40px,12.4vw,60px)}
  .eyebrow{font-size:14px;margin-bottom:22px}
  .opening .p-lead{margin-top:24px;font-size:17px}
  .opening__act{margin-top:32px;gap:24px}
  .facts{margin-top:32px;gap:8px}
  .facts li{font-size:13px;padding:6px 13px}
  .p-lead{font-size:17px}
  .h-lg{font-size:clamp(32px,9.4vw,44px)}
  .h-md,.feat .h-md{font-size:clamp(30px,8.6vw,40px)}
  .blk{padding-block:72px}
  .marq__t{gap:44px}
  .how li{grid-template-columns:52px minmax(0,1fr);gap:6px 14px}
  .how__n{font-size:44px}
  .how__t{font-size:22px}
  .ticks li{font-size:16px}
  .stat b{font-size:88px}
  .srv{grid-template-columns:22px minmax(0,1fr);gap:6px 12px}
  .srv__t{font-size:21px}
  .faq__i summary{font-size:18px;padding-block:20px;padding-inline-end:36px}
  .faq__a{font-size:16px;line-height:1.65}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important}
  .ln > span,.rv,.opening .eyebrow,.opening .p-lead,.facts,.opening__act,.stack .dev{transform:none !important;opacity:1 !important}
  .marq__t{animation:none}
}