/* The hero's app-screen story (LANDING-AI, owner 2026-10-07; LANDINGPOS, owner 2026-10-22): the easySales screen in
   one crisp display, a camera working inside it. Every class is prefixed ez- so nothing here meets site.css or demo.css.
   The words live in index.html (translated by src/landing/localize.mjs); public/easy.js only moves
   them. Prototype and design note: docs/migration/notes/landing-ai-collab-*. */
.ez-hero{--ez-blue:#337ab7;--ez-blue-2:#4a90c9;--ez-blue-bg:#e8f1f9;--ez-bg:#f5f5f5;--ez-text:#28323c;--ez-ink:#16212c;--ez-muted:#6b7682;--ez-faint:#9aa4ae;--ez-line:#e8ebee;--ez-line-2:#d9dee3;--ez-ok:#23945a;--ez-wait:#c27a20;--ez-danger:#d4380d;
  --ez-p1:#f9f0ff;--ez-p2:#efdbff;--ez-p3:#d3adf7;--ez-p5:#9254de;--ez-p6:#722ed1;--ez-p7:#531dab;--ez-p7-dark:#ab7ae0;
  --ez-ease:cubic-bezier(.22,.61,.36,1);--ez-cam:1s;--ez-cam-ease:cubic-bezier(.4,0,.2,1)}
.ez-hero{position:relative;overflow:hidden;color:#fff;padding:clamp(48px,7vw,104px) var(--pad) clamp(56px,7vw,104px);
  background:radial-gradient(50% 60% at 72% 50%,#16314f 0%,transparent 72%),linear-gradient(180deg,#0b1c2e 0%,#0c1f33 100%)}
.ez-hero-inner{max-width:1360px;margin:0 auto;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,4vw,56px);align-items:center}

/* The headline is one sentence and wraps where the browser balances it: no forced line breaks in any language
   (owner 2026-10-22: 注意文案的断行，不要硬断). */
.ez-hero h1{margin:0 0 24px;font-size:clamp(34px,3.4vw,52px);line-height:1.08;letter-spacing:-.035em;font-weight:700;text-wrap:balance}
/* Chinese and Japanese set every glyph full width and have no spaces to break at: one size down, natural tracking,
   and breaks at punctuation first, inside a word only when a line cannot fit (owner 2026-10-07). */
:lang(zh-Hans) .ez-hero h1,:lang(zh-Hant) .ez-hero h1,:lang(ja) .ez-hero h1{font-size:clamp(30px,3vw,46px);line-height:1.18;letter-spacing:-.01em;word-break:keep-all;overflow-wrap:anywhere}
:lang(ja) .ez-hero h1{word-break:auto-phrase}
/* Malay and Thai run longer. */
:lang(ms) .ez-hero h1,:lang(th) .ez-hero h1{font-size:clamp(32px,3.1vw,48px)}
.ez-lede{margin:0 0 32px;max-width:26em;font-size:clamp(17px,1.4vw,21px);line-height:1.5;letter-spacing:-.01em;color:#c3d1de}
.ez-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px}
.ez-link{color:#fff;font-size:15px;font-weight:700;border-bottom:1px solid #ffffff66;padding-bottom:2px}
.ez-link:hover{border-color:#fff}

/* The positioning line leads the lede; the note under the demo link says what the demo is (LANDING-1015). */

/* Chinese and Japanese: break the positioning line at its punctuation first, inside a word only when a line cannot fit. */

.ez-demo,.ez-start{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.ez-demo small,.ez-start small{font-size:12px;letter-spacing:.02em;color:#9fb2c4}

/* ---------- the display: a crisp rounded screen, the camera inside it ---------- */
.ez-stage-wrap{min-width:0;position:relative}
.ez-stage{position:relative;aspect-ratio:1180/740}
/* on a phone the player keeps the screen's width and changes only its height: the whole phone screen
   to open and close, a shorter window on whatever is happening (owner 2026-10-07, as in the approved H5) */
.ez-stage.ez-m{aspect-ratio:auto;width:min(100%,360px);height:var(--ez-h,640px);margin-inline:auto;transition:height var(--ez-cam) var(--ez-cam-ease)}
.ez-rig{position:absolute;inset:0;transition:transform var(--ez-cam) var(--ez-cam-ease),opacity .7s ease}
.ez-display{position:absolute;inset:0;overflow:hidden;border-radius:14px;background:var(--ez-bg);isolation:isolate;
  box-shadow:0 0 0 1px #ffffff26,0 2px 4px #0003,0 24px 48px -12px #0007,0 60px 120px -30px #000a}
.ez-m .ez-display{border-radius:12px}
.ez-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ez-below{margin-top:18px}
.ez-stage.ez-m+.ez-below{width:min(100%,360px);margin-inline:auto}
.ez-ctl{width:30px;height:30px;border-radius:50%;border:1px solid #ffffff2a;background:#ffffff0d;color:#cfdbe6;display:grid;place-items:center;cursor:pointer;opacity:.75}
.ez-ctl svg{width:11px;height:11px}
.ez-ctl .ez-play-ic,.ez-paused .ez-ctl .ez-pause-ic{display:none}
.ez-paused .ez-ctl .ez-play-ic{display:block}
/* ---------- the steps under the screen (owner 2026-10-21: 让不熟悉 CRM 或 AI 的人也看懂) ----------
   Without script, or with reduced motion, the five steps are a short numbered list under the finished thread.
   With the story playing (.ez-stepper), the step names are a row of five and only the current sentence shows;
   every sentence shares one grid cell, so the row keeps the height of the longest and nothing below it jumps. */
.ez-ctls{display:flex;justify-content:flex-end;gap:8px}
.ez-ctl[hidden]{display:none}
.ez-step-ctl{display:none}
.ez-story{list-style:none;margin:0 0 14px;padding:0;color:#c3d1de;font-size:15px;line-height:1.55}
.ez-story li{display:flex;gap:10px;margin:0 0 8px}
.ez-sn{flex:none;margin:0;padding:0;border:0;background:none;color:#fff;font:inherit;font-weight:700;text-align:left;pointer-events:none}
.ez-sn-n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#ffffff1f;font-size:12px}
.ez-sn-t{display:none}
.ez-cap{margin:0}
.ez-stepper .ez-step-ctl{display:grid}
.ez-stepper .ez-story{display:grid;grid-template-columns:repeat(var(--ez-n,5),minmax(0,1fr));gap:0 6px;margin-bottom:10px}
.ez-stepper .ez-story li{display:contents}
.ez-stepper .ez-sn{grid-row:1;display:flex;align-items:flex-start;gap:6px;padding:9px 2px 0;border-top:3px solid #ffffff24;color:#ffffff80;font-size:13px;font-weight:400;line-height:1.35;cursor:pointer;pointer-events:auto;transition:color .3s,border-color .3s}
.ez-stepper .ez-sn:hover{color:#fff}
.ez-stepper .ez-sn:focus-visible{outline:2px solid #80b9e7;outline-offset:2px}
.ez-stepper .ez-sn-n{flex:none;width:18px;height:18px;font-size:11px;background:#ffffff14}
.ez-stepper .ez-sn-t{display:block;min-width:0}
.ez-stepper .ez-past .ez-sn{border-color:#9254de88}
.ez-stepper .ez-cur .ez-sn{border-color:var(--ez-p5);color:#fff;font-weight:700}
.ez-stepper .ez-cur .ez-sn-n{background:var(--ez-p5)}
.ez-stepper .ez-cap{grid-row:2;grid-column:1/-1;margin-top:14px;font-size:clamp(16px,1.25vw,18px);line-height:1.55;color:#fff;visibility:hidden;opacity:0;transition:opacity .45s var(--ez-ease),visibility 0s .45s}
.ez-stepper .ez-cur .ez-cap{visibility:visible;opacity:1;transition:opacity .45s var(--ez-ease)}
:lang(zh-Hans) .ez-cap,:lang(zh-Hant) .ez-cap,:lang(ja) .ez-cap,:lang(zh-Hans) .ez-sn-t,:lang(zh-Hant) .ez-sn-t,:lang(ja) .ez-sn-t{word-break:keep-all;overflow-wrap:anywhere}
:lang(ja) .ez-cap,:lang(ja) .ez-sn-t{word-break:auto-phrase}
/* On a phone the five names do not fit side by side: numbers only, the sentence says the rest. */
.ez-stage.ez-m+.ez-below .ez-sn-t{display:none}
.ez-stage.ez-m+.ez-below .ez-cap{font-size:16px}

/* ---------- the app screen (the app's light theme) ----------
   Every length on the canvas is written at 1.6 times the app's own (a 14px label is 22.4px here) and
   the camera only ever scales it down, so the browser always holds a sharper picture than it shows:
   no soft text while the camera moves in (owner 2026-10-07). Plain lengths, not CSS zoom, so every
   browser lays it out the same; easy.js reads the factor back from the top bar's height. */
/* moved frame by frame by easy.js (one zoom about one point), so no transition here */
.ez-screen{position:absolute;left:0;top:0;transform-origin:0 0}
.ez-canvas{position:relative;width:1888px;height:1184px;overflow:hidden;background:var(--ez-bg);color:var(--ez-text);
  font-size:22.4px;line-height:1.5715;text-align:left;letter-spacing:0;color-scheme:light}
.ez-screen *{box-sizing:border-box}
.ez-screen [hidden]{display:none!important}
.ez-ic{width:25.6px;height:25.6px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ez-top{position:absolute;left:0;right:0;top:0;height:76.8px;background:#fff;border-bottom:1.6px solid var(--ez-line);display:flex;align-items:center;gap:22.4px;padding:0 25.6px 0 35.2px;z-index:2}
.ez-logo{height:32px;width:auto;flex:none}
.ez-burger{display:none;color:var(--ez-muted)}
.ez-search{display:flex;align-items:center;gap:12.8px;margin-left:73.6px;width:480px;height:51.2px;border:1.6px solid var(--ez-line-2);border-radius:9.6px;padding:0 16px;color:var(--ez-faint);font-size:20.8px;background:#fff;white-space:nowrap;overflow:hidden}
.ez-search span{overflow:hidden;text-overflow:ellipsis}
.ez-search kbd{margin-left:auto;font-family:inherit;font-size:17.6px;color:var(--ez-faint);border:1.6px solid var(--ez-line-2);border-radius:6.4px;padding:0 8px}
.ez-tools{margin-left:auto;display:flex;align-items:center;gap:9.6px;color:var(--ez-muted)}
.ez-tool{width:51.2px;height:51.2px;display:grid;place-items:center;border-radius:9.6px;position:relative}
.ez-tool .ez-ic{width:28.8px;height:28.8px}
.ez-dotn{position:absolute;top:9.6px;right:11.2px;width:11.2px;height:11.2px;border-radius:50%;background:var(--ez-danger);box-shadow:0 0 0 3.2px #fff}
.ez-me{display:flex;align-items:center;gap:12.8px;margin-left:9.6px;font-size:20.8px;color:var(--ez-ink)}
.ez-side{position:absolute;left:0;top:76.8px;bottom:0;width:345.6px;background:#fff;border-right:1.6px solid var(--ez-line);padding:16px 0;overflow:hidden;z-index:1}

/* the whole menu as production draws it, groups split by a line with no title (owner O1, 2026-10-22) */
.ez-div{height:1.6px;margin:6.4px 25.6px;background:var(--ez-line)}
.ez-side a{display:flex;align-items:center;gap:16px;height:44.8px;margin:0 12.8px 3.2px;padding:0 12.8px;border-radius:9.6px;color:var(--ez-text);font-size:22.4px}
.ez-side a .ez-n{margin-left:auto;font-size:19.2px;color:var(--ez-faint)}
.ez-side a.ez-on{background:var(--ez-blue);color:#fff}
.ez-badge{margin-left:auto;min-width:32px;height:28.8px;border-radius:14.4px;background:var(--ez-danger);color:#fff;font-size:17.6px;font-weight:700;display:grid;place-items:center;padding:0 9.6px}
.ez-main{position:absolute;left:345.6px;right:0;top:76.8px;bottom:0;padding:22.4px 38.4px 25.6px;display:flex;flex-direction:column}
.ez-crumb{font-size:19.2px;color:var(--ez-faint);margin-bottom:9.6px}
.ez-ph{display:flex;align-items:center;gap:19.2px}
.ez-org{width:57.6px;height:57.6px;border-radius:12.8px;background:#e7eef6;color:var(--ez-blue);display:grid;place-items:center;font-weight:700;font-size:20.8px;flex:none}
.ez-ph h2{margin:0;font-size:32px;line-height:44.8px;font-weight:700;color:var(--ez-ink);letter-spacing:-.01em;white-space:nowrap}
.ez-sub{font-size:20px;color:var(--ez-muted)}
.ez-acts{margin-left:auto;display:flex;gap:12.8px}
.ez-btn{display:inline-flex;align-items:center;gap:9.6px;height:51.2px;padding:0 24px;border-radius:9.6px;border:1.6px solid var(--ez-line-2);background:#fff;color:var(--ez-text);font-size:22.4px;white-space:nowrap;transition:background .25s,border-color .25s,color .25s}
.ez-btn.ez-primary{background:var(--ez-blue);border-color:var(--ez-blue);color:#fff}
.ez-btn.ez-sm{height:44.8px;padding:0 19.2px;font-size:20.8px}
.ez-btn.ez-off{background:#f5f5f5;border-color:var(--ez-line-2);color:#00000040}
.ez-tag{display:inline-block;font-size:19.2px;line-height:32px;padding:0 11.2px;border-radius:6.4px;border:1.6px solid var(--ez-line-2);background:#fafafa;color:var(--ez-muted);white-space:nowrap}
.ez-cust{color:#0958d9;background:#e6f4ff;border-color:#91caff}
.ez-ai-tag{color:var(--ez-p7);background:var(--ez-p1);border-color:var(--ez-p3);font-size:18.4px;line-height:28.8px;padding:0 9.6px}

.ez-sent{color:#237804;background:#f6ffed;border-color:#b7eb8f}
.ez-over{color:#cf1322;background:#fff1f0;border-color:#ffa39e}
.ez-tabs{display:flex;gap:44.8px;border-bottom:1.6px solid var(--ez-line);margin:19.2px 0 22.4px;font-size:22.4px;color:var(--ez-text);white-space:nowrap}
.ez-tabs>span{padding:12.8px 0 16px;position:relative}
.ez-tabs i{font-style:normal;color:var(--ez-faint);margin-left:6.4px;font-size:19.2px}
.ez-tabs .ez-on{color:var(--ez-blue)}
.ez-tabs .ez-on:after{content:'';position:absolute;left:0;right:0;bottom:-1.6px;height:3.2px;background:var(--ez-blue)}
.ez-cols{flex:1;min-height:0;display:grid;grid-template-columns:505.6px minmax(0,1fr);gap:25.6px}
.ez-panel{background:#fff;border:1.6px solid var(--ez-line);border-radius:12.8px;min-height:0}

/* activity timeline */
.ez-tl{padding:19.2px 19.2px 0;overflow:hidden}
.ez-seg{display:inline-flex;background:#f0f2f4;border-radius:9.6px;padding:3.2px;font-size:20px;margin:0 0 9.6px 6.4px}
.ez-seg span{padding:3.2px 16px;border-radius:6.4px;color:var(--ez-muted)}
.ez-seg .ez-on{background:#fff;color:var(--ez-ink);box-shadow:0 1.6px 3.2px #0001}
.ez-tl h4{margin:16px 6.4px 9.6px;font-size:19.2px;color:var(--ez-faint);font-weight:400;letter-spacing:0;text-transform:none}
.ez-tl-item{display:flex;gap:16px;padding:16px;border-radius:12.8px;border:1.6px solid transparent;margin-bottom:3.2px}
.ez-tl-item.ez-sel{background:var(--ez-blue-bg);border-color:#cfe0f0}
.ez-tl-ic{width:44.8px;height:44.8px;border-radius:50%;display:grid;place-items:center;flex:none;background:#eef1f4;color:var(--ez-muted)}
.ez-tl-ic .ez-ic{width:22.4px;height:22.4px}
.ez-note-ic{background:#e6f4ff;color:#0958d9}.ez-call-ic{background:#e6fffb;color:#08979c}.ez-doc-ic{background:var(--ez-p1);color:var(--ez-p6)}.ez-inv-ic{background:#fff1f0;color:#cf1322}
.ez-h{font-size:20px;color:var(--ez-muted)}
.ez-h b{color:var(--ez-ink)}
.ez-tl-item p{margin:3.2px 0 0;font-size:20.8px;color:var(--ez-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ez-f{display:flex;align-items:center;gap:8px;margin-top:6.4px;font-size:19.2px;color:var(--ez-blue)}
.ez-f .ez-ic{width:20.8px;height:20.8px}
.ez-f.ez-none{color:var(--ez-faint)}

/* the thread */
.ez-thread{position:relative;display:flex;flex-direction:column;overflow:hidden}
.ez-th-head{display:flex;align-items:center;gap:16px;padding:19.2px 25.6px;border-bottom:1.6px solid var(--ez-line);flex:none}
.ez-th-head .ez-tl-ic{width:41.6px;height:41.6px}
.ez-w{font-size:20.8px;color:var(--ez-muted);line-height:1.35}
.ez-w b{display:block;color:var(--ez-ink);font-size:22.4px}
.ez-people{display:flex;margin-left:auto;margin-right:9.6px}
.ez-people>*{margin-left:-6.4px;box-shadow:0 0 0 3.2px #fff;position:relative}
.ez-people>*:first-child{margin-left:0}
.ez-people .ez-mk{background:#fff}
.ez-people i{position:absolute;inset:-6.4px;border-radius:50%;border:3.2px solid #ff4d4f;opacity:0;pointer-events:none}
.ez-people .ez-ping i{animation:ez-ping 1.4s var(--ez-ease) 2}
@keyframes ez-ping{0%{opacity:.9;transform:scale(.9)}100%{opacity:0;transform:scale(1.55)}}
.ez-people b{position:absolute;top:-3.2px;right:-3.2px;width:14.4px;height:14.4px;border-radius:50%;background:#ff4d4f;box-shadow:0 0 0 3.2px #fff;transform:scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.ez-people .ez-ping b{transform:scale(1)}
.ez-th-body{position:relative;flex:1;min-height:0;overflow:hidden;padding:22.4px 25.6px 12.8px}
.ez-root{font-size:22.4px;color:var(--ez-text);padding-bottom:19.2px}
.ez-root p{margin:0 0 12.8px}
.ez-link-chip{display:inline-flex;align-items:center;gap:9.6px;font-size:20px;color:var(--ez-blue);background:#f3f7fb;border:1.6px solid #dbe7f3;border-radius:6.4px;padding:1.6px 12.8px}
.ez-link-chip .ez-ic{width:20.8px;height:20.8px}
.ez-rtitle{display:flex;align-items:center;gap:9.6px;font-size:20px;color:var(--ez-muted);font-weight:700;margin:6.4px 0 16px}
.ez-rtitle:after{content:'';flex:1;height:1.6px;background:var(--ez-line);margin-left:6.4px}
.ez-empty{font-size:20.8px;color:var(--ez-faint);padding:3.2px 0 12.8px}

/* replies */
.ez-msg{position:relative;isolation:isolate;display:flex;gap:16px;padding:12.8px 12.8px 16px;margin:0 -12.8px 3.2px;border-radius:12.8px}
.ez-live .ez-msg,.ez-live .ez-typing{animation:ez-rise .55s var(--ez-ease) backwards}
@keyframes ez-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ez-mb{min-width:0;flex:1}
.ez-msg header{display:flex;align-items:center;gap:12.8px;font-size:20.8px;line-height:35.2px}
.ez-msg header b{color:var(--ez-ink)}
.ez-msg header time{color:var(--ez-faint);font-size:19.2px}
.ez-txt{font-size:22.4px;line-height:1.6;color:var(--ez-text)}
.ez-txt p{margin:0}

.ez-mention{color:var(--ez-blue);font-weight:700}

.ez-rec{color:var(--ez-blue);text-decoration:underline;text-decoration-color:#337ab755;text-underline-offset:4.8px}
.ez-react{display:inline-flex;align-items:center;gap:9.6px;margin-top:9.6px;font-size:19.2px;color:var(--ez-muted);background:#f3f5f7;border:1.6px solid var(--ez-line);border-radius:1598.4px;padding:0 14.4px}
.ez-live .ez-react{animation:ez-pop .45s cubic-bezier(.3,1.6,.5,1) backwards}
.ez-typing{display:flex;align-items:center;gap:9.6px;font-size:20px;color:var(--ez-muted);padding:6.4px 0 12.8px}
.ez-list>.ez-typing{display:none}
.ez-list>.ez-typing.ez-on{display:flex}
.ez-dots{display:inline-flex;gap:4.8px;margin-right:3.2px}
.ez-dots i{width:6.4px;height:6.4px;border-radius:50%;background:var(--ez-faint);animation:ez-bounce 1.1s infinite}
.ez-dots i:nth-child(2){animation-delay:.15s}.ez-dots i:nth-child(3){animation-delay:.3s}
@keyframes ez-bounce{0%,80%,100%{transform:none;opacity:.45}40%{transform:translateY(-4.8px);opacity:1}}

/* avatars: people round, the assistant's glyph square (AssistantGlyph, v2.243.3) */
.ez-av{display:inline-grid;place-items:center;width:44.8px;height:44.8px;border-radius:50%;color:#fff;font-size:17.6px;font-weight:700;flex:none;letter-spacing:.02em}
.ez-av.ez-s{width:38.4px;height:38.4px;font-size:15.2px;letter-spacing:0}
.ez-p1{background:#337ab7}.ez-p2{background:#118a8c}.ez-p3{background:#b8682a}.ez-p4{background:#7a5cc4}
.ez-mk{position:relative;display:inline-grid;place-items:center;width:44.8px;height:44.8px;border-radius:9.6px;color:var(--ez-p6);flex:none}
.ez-mk svg{width:100%;height:100%}
.ez-mk.ez-s{width:38.4px;height:38.4px}
@property --ez-a{syntax:'<angle>';initial-value:0deg;inherits:false}

@keyframes ez-orbit{to{--ez-a:360deg}}

/* the mark's beam, too, follows the border's path at one speed (BorderBeam count 1, 2 s, length 16) */

/* states of an @easy reply: working (status, Stop, the plan line), then the answer */




@keyframes ez-pop{from{transform:scale(.3)}to{transform:scale(1)}}

.ez-qref{display:flex;align-items:center;gap:19.2px;margin-top:16px;padding:16px 19.2px;border:1.6px solid var(--ez-line);border-radius:12.8px;background:#fff}
.ez-q-ic{width:54.4px;height:64px;border-radius:6.4px;background:#f6f8fa;border:1.6px solid var(--ez-line);display:grid;place-items:center;color:var(--ez-p6);flex:none}
.ez-qm{min-width:0;font-size:20px;color:var(--ez-muted);line-height:1.45}
.ez-qm b{display:block;color:var(--ez-ink);font-size:21.6px}
.ez-qr{margin-left:auto;display:flex;align-items:center;gap:12.8px;flex:none}

/* States (LANDINGPOS): an element with data-q is in one state; of its parts marked data-when, only those that list
   that state show. index.html ships the finished state; easy.js sets the first (data-q0) and walks the rest. */
[data-q="over"] [data-when]:not([data-when~="over"]),[data-q="paid"] [data-when]:not([data-when~="paid"]),
[data-q="open"] [data-when]:not([data-when~="open"]),[data-q="sent"] [data-when]:not([data-when~="sent"]){display:none}
.ez-live .ez-flip [data-when]{animation:ez-pop .45s cubic-bezier(.3,1.6,.5,1) backwards}
.ez-opn{color:#0958d9;background:#e6f4ff;border-color:#91caff}

/* the reply box */
.ez-composer{position:relative;display:flex;align-items:flex-end;gap:16px;padding:16px 25.6px 19.2px;border-top:1.6px solid var(--ez-line);flex:none;background:#fff}
.ez-composer>.ez-av{margin-bottom:3.2px}
.ez-box-wrap{position:relative;flex:1;min-width:0}
.ez-box{position:relative;min-height:54.4px;border:1.6px solid var(--ez-line-2);border-radius:9.6px;padding:8px 17.6px;font-size:22.4px;line-height:35.2px;color:var(--ez-text);background:#fff;transition:border-color .25s,box-shadow .25s}
.ez-phd{color:var(--ez-faint)}
.ez-box.ez-focus{border-color:var(--ez-blue-2);box-shadow:0 0 0 3.2px #337ab71a}
/* while @easy is in the box: three purple beams, 6 s a lap (BorderBeam count 3, line 2, length 96).
   Like antd's BorderBeam, each beam travels the border's own path (offset-path), so all three keep
   one speed and stay a third of a lap apart; a turning gradient (the fallback below) moves at one
   angular speed, which on a long, low box sweeps the short ends and crawls along the long ones. */
.ez-beams{position:absolute;inset:-3.2px;padding:3.2px;border-radius:12.8px;pointer-events:none;opacity:0;transition:opacity .2s ease-out;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.ez-beams i{position:absolute;left:0;top:0;width:153.6px;height:12.8px;background:linear-gradient(to left,var(--ez-p7),var(--ez-p5) 35%,transparent);
  offset-path:rect(0 auto auto 0 round 12.8px);offset-anchor:100% 50%;offset-rotate:auto;animation:ez-beam 6s linear infinite}
.ez-beams i:nth-child(2){animation-delay:-2s}.ez-beams i:nth-child(3){animation-delay:-4s}
@keyframes ez-beam{from{offset-distance:0%}to{offset-distance:100%}}
@supports (offset-path:rect(0 auto auto 0)){.ez-box-wrap.ez-beam .ez-beams{opacity:1}}
.ez-box:before{content:'';position:absolute;inset:-3.2px;border-radius:11.2px;padding:3.2px;opacity:0;transition:opacity .2s ease-out;pointer-events:none;
  background:conic-gradient(from var(--ez-a),transparent 0 22%,var(--ez-p5) 30%,var(--ez-p7) 33.3%,transparent 33.4% 55.3%,var(--ez-p5) 63.3%,var(--ez-p7) 66.6%,transparent 66.7% 88.6%,var(--ez-p5) 96.6%,var(--ez-p7) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ez-orbit 6s linear infinite}
@supports not (offset-path:rect(0 auto auto 0)){.ez-box-wrap.ez-beam .ez-box:before{opacity:1}}
.ez-chip{color:var(--ez-p7);background:var(--ez-p1);border-radius:6.4px;padding:0 4.8px;white-space:nowrap;animation:ez-chipin .2s ease-out backwards}
.ez-chip.ez-chip-p{color:var(--ez-blue);background:#e6f4ff;font-weight:700}
@keyframes ez-chipin{from{background:transparent}}
.ez-caret{display:inline-block;width:2.4px;height:25.6px;background:var(--ez-ink);vertical-align:-4.8px;margin-left:1.6px;animation:ez-blink 1s step-end infinite}
@keyframes ez-blink{50%{opacity:0}}
.ez-picker{position:absolute;left:83.2px;bottom:calc(100% - 6.4px);width:384px;background:#fff;border-radius:12.8px;padding:6.4px;z-index:3;
  box-shadow:0 9.6px 25.6px #00000014,0 4.8px 9.6px -6.4px #0000001f,0 14.4px 44.8px 12.8px #0000000d;animation:ez-drop .25s var(--ez-ease) backwards}
@keyframes ez-drop{from{opacity:0;transform:translateY(9.6px)}to{opacity:1;transform:none}}
.ez-picker>div{display:flex;align-items:center;gap:16px;padding:9.6px 16px;border-radius:9.6px;font-size:22.4px;color:var(--ez-ink)}
.ez-picker .ez-hi{background:#f5f5f5}
.ez-picker .ez-ai-row{margin-bottom:14.4px;position:relative}
.ez-picker .ez-ai-row:after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:1.6px;background:var(--ez-line)}
.ez-picker .ez-ai-tag{margin-left:auto}
.ez-press{animation:ez-press .3s ease}
@keyframes ez-press{50%{transform:scale(.95)}}

/* the quotation drawer */
/* Entrance animations fill backwards only: once played, nothing is left animated, so Safari does not keep those
   blocks on layers of their own that it can paint above the drawer's dimming (owner 2026-10-07). */
.ez-drawer{position:absolute;top:0;right:0;bottom:0;width:864px;background:#fff;z-index:7;display:flex;flex-direction:column;
  box-shadow:-9.6px 0 25.6px #00000014,-19.2px 0 76.8px 25.6px #0000000d;transform:translateX(102%);transition:transform .5s var(--ez-ease)}
.ez-drawer.ez-on{transform:none}
/* The dimming belongs to the drawer, so nothing can come between them: a separate mask was painted above the
   drawer by Safari, greying the quote and leaving a white seam (owner 2026-10-07). It reaches past the screen's
   left edge from wherever the drawer is, and fades in while the drawer slides. */
.ez-drawer:before{content:'';position:absolute;top:0;bottom:0;right:100%;width:2400px;background:#00000073;opacity:0;pointer-events:none;transition:opacity .4s ease}
.ez-drawer.ez-on:before{opacity:1}
.ez-drawer>header{display:flex;align-items:center;gap:16px;padding:22.4px 32px;border-bottom:1.6px solid var(--ez-line);font-size:25.6px}
.ez-drawer>header b{color:var(--ez-ink)}
.ez-drawer .ez-x{margin-left:auto;color:var(--ez-faint)}
.ez-dbody{flex:1;min-height:0;padding:25.6px 32px;overflow:hidden}
.ez-meta{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:9.6px 22.4px;font-size:20.8px;margin:0 0 25.6px}
.ez-meta dt{color:var(--ez-muted)}.ez-meta dd{margin:0;color:var(--ez-ink)}
.ez-lines{width:100%;border-collapse:collapse;font-size:20.8px;font-variant-numeric:tabular-nums}
.ez-lines th{text-align:left;font-weight:700;color:var(--ez-ink);background:#fafafa;padding:12.8px;border-bottom:1.6px solid var(--ez-line)}
.ez-lines td{padding:14.4px 12.8px;border-bottom:1.6px solid #f0f0f0}
.ez-lines th:nth-child(n+2),.ez-lines td:nth-child(n+2){text-align:right;white-space:nowrap}
.ez-totals{margin:19.2px 0 0 auto;width:432px;font-size:20.8px;font-variant-numeric:tabular-nums}
.ez-totals>div{display:flex;justify-content:space-between;padding:6.4px 12.8px}
.ez-grand{border-top:1.6px solid var(--ez-line);margin-top:9.6px;padding-top:16px!important;font-size:24px;font-weight:700;color:var(--ez-ink)}
.ez-remark{margin-top:25.6px;font-size:20.8px}
.ez-remark small{display:block;color:var(--ez-muted);font-size:19.2px;margin-bottom:6.4px}
.ez-remark p{margin:0;padding:12.8px 16px;border:1.6px solid var(--ez-line);border-radius:9.6px;background:#fafbfc}
.ez-terms{margin:22.4px 0 0;padding:0;list-style:none;font-size:20px;color:var(--ez-muted);display:grid;gap:4.8px}
.ez-terms li:before{content:'·';margin-right:9.6px}
.ez-mark{background:linear-gradient(#fff1b8,#fff1b8) no-repeat 0 0/0% 100%;border-radius:4.8px;transition:background-size .9s var(--ez-ease)}
.ez-mark.ez-on{background-size:100% 100%}
.ez-drawer>footer{display:flex;justify-content:flex-end;gap:12.8px;padding:19.2px 32px;border-top:1.6px solid var(--ez-line)}
.ez-toast{position:absolute;left:50%;top:22.4px;z-index:9;display:flex;align-items:center;gap:9.6px;padding:14.4px 25.6px;border-radius:12.8px;background:#fff;font-size:22.4px;color:var(--ez-ink);white-space:nowrap;
  box-shadow:0 9.6px 25.6px #00000014,0 4.8px 9.6px -6.4px #0000001f,0 14.4px 44.8px 12.8px #0000000d;transform:translate(-50%,-25.6px);opacity:0;transition:transform .35s var(--ez-ease),opacity .35s}
.ez-toast.ez-on{transform:translate(-50%,0);opacity:1}
.ez-toast .ez-ic{color:var(--ez-ok)}

/* the pointer lives on the screen and is drawn at a constant size whatever the zoom */
.ez-cursor{position:absolute;left:0;top:0;width:22px;height:22px;pointer-events:none;z-index:10;opacity:0;transform-origin:0 0;--ez-ck:1;transition:transform .45s var(--ez-cam-ease),opacity .3s}
.ez-cursor.ez-on{opacity:1}
.ez-cursor svg{width:20px;height:20px;filter:drop-shadow(0 2px 3px #0006)}
.ez-ring{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;background:#337ab755;opacity:0}
.ez-cursor.ez-click .ez-ring{animation:ez-ring .5s ease-out}
@keyframes ez-ring{from{opacity:.9;transform:scale(.2)}to{opacity:0;transform:scale(1.4)}}

/* the app's phone layout, used when the stage is narrow */
.ez-m .ez-canvas{width:640px;height:1152px}
.ez-m .ez-side,.ez-m .ez-search,.ez-m .ez-tools .ez-tool:not(.ez-bell),.ez-m .ez-me-name,.ez-m .ez-crumb,.ez-m .ez-acts,.ez-m .ez-sub,.ez-m .ez-tl,.ez-m .ez-when,.ez-m .ez-wide-only{display:none}
.ez-m .ez-burger{display:block}
.ez-m .ez-top{padding:0 19.2px 0 22.4px;gap:19.2px}
.ez-m .ez-main{left:0;padding:19.2px}
.ez-m .ez-ph h2{font-size:28.8px}
.ez-m .ez-org{width:51.2px;height:51.2px}
.ez-m .ez-tabs{gap:32px;margin:12.8px 0 16px;overflow:hidden}
.ez-m .ez-cols{grid-template-columns:minmax(0,1fr)}
.ez-m .ez-drawer{width:100%}
.ez-m .ez-meta{grid-template-columns:auto 1fr}
.ez-m .ez-picker{left:70.4px}

.ez-m .ez-phd{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ez-m .ez-qref{flex-wrap:wrap}
.ez-m .ez-qr{flex-basis:100%;justify-content:flex-end}
.ez-m .ez-drawer>footer{padding:16px 19.2px}

.ez-instant *,.ez-instant *:before,.ez-instant *:after{transition:none!important;animation-duration:0s!important;animation-delay:0s!important}
.ez-paused *,.ez-paused *:before,.ez-paused *:after{animation-play-state:paused!important}
@media (max-width:980px){.ez-hero-inner{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ez-rig,.ez-screen,.ez-cursor,.ez-drawer,.ez-drawer:before{transition:none}}