/* The account door's stepper scenes (_door-steps.php): the real screens in
   miniature inside two devices, an iPhone-style phone (every width) and a
   desktop browser (from 1240px, filling the scene behind the phone). Linked
   by _door-steps.php next to vow-doors.css, which owns the stepper's bar,
   frames and captions; ello and laurenrose read this file through asset()'s
   base-theme fallback and dress it with their own tokens. Every screen is DOM
   and SVG: sharp at any pixel density. The only rasters are Lauren's own
   photos, with srcset rungs. Motion only under prefers-reduced-motion:
   no-preference, and every animated part's resting style IS its end state,
   so nothing strands.
   The devices carry no maker's marks: the window lights are the grey of an
   unfocused window (the brand never prints green), the phone's rim, island,
   buttons and home bar are plain shapes.
   The miniature email keeps the mail's own fixed palette (core/mailer.php):
   an email is not themed. */

/* ── the scene: a lit stage the devices stand on and bleed out of ────────── */
.vd-scene{position:relative;height:var(--vd-h,400px);overflow:hidden;border-radius:14px;border:1px solid var(--line,#E5DDD6);--land:2.5s;isolation:isolate;
  background:radial-gradient(90% 70% at 12% 0%,#fff 0%,rgba(255,255,255,0) 60%),radial-gradient(70% 60% at 100% 100%,var(--blush,#F6EAEB) 0%,rgba(246,234,235,0) 70%),var(--cream,#F4EDE7)}
.vd-frame{--vd-h:clamp(400px,112vw,450px)}
.vd-scene *{box-sizing:border-box}
.vd-scene img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
.vd-scene p{margin:0}

/* ── the phone: a two-tone rim, side buttons, the island, status bar, home bar ── */
.vd-ph{position:absolute;left:50%;top:18px;translate:-50% 0;width:min(316px,100% - 16px);height:620px;padding:10px;border-radius:48px;z-index:2;
  background:linear-gradient(160deg,#3B3C41 0%,#141518 34%,#1C1D21 68%,#38393E 100%);
  box-shadow:0 0 0 1px #55575D,0 0 0 2.5px #1B1C1F,0 36px 70px -24px rgba(34,37,42,.62),inset 0 0 0 1px rgba(255,255,255,.08)}
.vd-ph::before,.vd-ph::after{content:"";position:absolute;width:3.5px;background:linear-gradient(90deg,#55575D,#2C2D32);border-radius:2px 0 0 2px}
.vd-ph::before{left:-4.5px;top:98px;height:20px;box-shadow:0 38px 0 #3B3C41,0 74px 0 #3B3C41}
.vd-ph::after{right:-4.5px;top:152px;height:62px;border-radius:0 2px 2px 0;background:linear-gradient(90deg,#2C2D32,#55575D)}
.vd-ph-scr{position:relative;height:100%;border-radius:38px;background:var(--paper,#FAF7F4);overflow:hidden;padding-top:34px;font-family:var(--sans,'Inter'),system-ui,sans-serif;color:var(--ink,#22252A)}
.vd-ph-sb{position:absolute;left:0;right:0;top:0;height:34px;display:flex;align-items:center;gap:5px;padding:0 24px 0 30px;font-size:11.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink,#22252A);z-index:6}
.vd-ph-sb b{font-weight:600}
.vd-ph-sig{display:flex;align-items:flex-end;gap:1.5px;height:9px;margin-left:auto}
.vd-ph-sig i{width:2.5px;border-radius:1px;background:currentColor}
.vd-ph-sig i:nth-child(1){height:3.5px}.vd-ph-sig i:nth-child(2){height:5.5px}.vd-ph-sig i:nth-child(3){height:7.5px}.vd-ph-sig i:nth-child(4){height:9px}
.vd-ph-sb svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.vd-ph-bat{width:21px;height:10px;border:1px solid rgba(34,37,42,.4);border-radius:3px;padding:1.5px;position:relative}
.vd-ph-bat i{display:block;height:100%;width:100%;border-radius:1.5px;background:currentColor}
.vd-ph-bat::after{content:"";position:absolute;right:-3.5px;top:2.5px;width:1.5px;height:3px;border-radius:0 1px 1px 0;background:rgba(34,37,42,.4)}
.vd-ph-isl{position:absolute;left:50%;top:9px;width:74px;height:22px;margin-left:-37px;border-radius:12px;background:#0A0A0C;z-index:7}
.vd-ph-home{position:absolute;left:50%;bottom:6px;width:104px;height:4px;margin-left:-52px;border-radius:3px;background:var(--ink,#22252A);opacity:.85;z-index:7}
/* Safari's bar under a web page: the address, then the five controls */
.vd-ph-sf{position:absolute;left:0;right:0;bottom:0;height:80px;padding:8px 12px 0;background:rgba(250,247,244,.94);border-top:1px solid var(--line,#E5DDD6);z-index:5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.vd-ph-url{display:flex;align-items:center;justify-content:center;gap:5px;height:30px;border-radius:10px;background:#fff;border:1px solid var(--line,#E5DDD6);font-size:10.5px;color:var(--ink,#22252A);box-shadow:0 1px 2px rgba(34,37,42,.05)}
.vd-ph-url svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--slate,#5F6B7A)}
.vd-ph-sfr{display:flex;justify-content:space-between;padding:9px 10px 0;color:var(--pop,#8A1428)}
.vd-ph-sfr svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:359px){.vd-ph{zoom:.9}}

/* ── the browser: window lights, back and forward, the address, the page ── */
.vd-br{display:none;position:absolute;left:0;top:16px;width:520px;border-radius:12px;background:#fff;border:1px solid var(--line,#E5DDD6);box-shadow:0 24px 56px -22px rgba(34,37,42,.4),0 1px 0 rgba(255,255,255,.7) inset;overflow:hidden;z-index:1;font-family:var(--sans,'Inter'),system-ui,sans-serif;color:var(--ink,#22252A)}
.vd-br-bar{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;background:linear-gradient(#F8F4F0,#EFE8E2);border-bottom:1px solid var(--line,#E5DDD6)}
.vd-br-tl{display:flex;gap:6px;flex:none}
.vd-br-tl i{width:11px;height:11px;border-radius:50%;background:#D9D3CD;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.vd-br-nav{display:flex;gap:6px;margin-left:4px;color:var(--slate,#5F6B7A);flex:none}
.vd-br-nav svg,.vd-br-acts svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vd-br-url{flex:1 1 auto;min-width:0;height:26px;display:flex;align-items:center;gap:6px;padding:0 10px;border-radius:8px;background:#fff;border:1px solid var(--line,#E5DDD6);font-size:10.5px;color:var(--ink,#22252A);white-space:nowrap;overflow:hidden;box-shadow:0 1px 2px rgba(34,37,42,.05)}
.vd-br-url span{flex:1 1 auto;text-align:center;overflow:hidden;text-overflow:ellipsis}
.vd-br-url svg{width:11px;height:11px;flex:none;fill:none;stroke:var(--slate,#5F6B7A);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vd-br-acts{display:flex;gap:10px;color:var(--slate,#5F6B7A);flex:none}
.vd-br-scr{position:relative;height:470px;background:var(--paper,#FAF7F4);overflow:hidden}

/* ── two devices from 1240px: the browser fills the scene, the phone in front ── */
@media (min-width:1240px){
  .vd-frame{--vd-h:430px}
  .vd-scene{--land:1.9s}
  .vd-br{display:block;left:0;right:0;top:16px;bottom:-30px;width:auto;zoom:.85;border-radius:12px 12px 0 0}
  .vd-br-scr{position:absolute;left:0;right:0;top:40px;bottom:0;height:auto}
  .vd-ph{left:auto;right:-8px;top:46px;translate:none;zoom:.62;width:300px}
}

/* ── the site header in miniature ───────────────────────────────────────── */
.vd-nav{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-bottom:1px solid var(--line,#E5DDD6);background:rgba(255,255,255,.55)}
.vd-brand{display:flex;align-items:center;gap:5px;font-family:var(--serif,'Fraunces'),serif;font-size:12px;letter-spacing:-.02em;white-space:nowrap;flex:none}
.vd-mark{width:14px;height:18px;color:var(--rose,#B76E79);flex:none}
.vd-nav-l{display:flex;gap:7px;margin-left:auto;font-size:8px;color:var(--ink,#22252A)}
.vd-nav-l i{font-style:normal}
.vd-nav-hv{font-size:8px;font-weight:600;padding:4px 8px;white-space:nowrap;border-radius:99px;background:var(--cream,#F4EDE7);border:1px solid var(--line,#E5DDD6)}
.vd-acct{width:22px;height:22px;border-radius:50%;background:var(--pop,#8A1428);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.vd-ph .vd-acct{margin-left:auto}
.vd-acct svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.vd-burger{display:grid;gap:3px;width:16px;flex:none}
.vd-burger i{height:1.5px;background:var(--ink,#22252A);border-radius:2px}
.vd-burger i:nth-child(2){width:10px}
.vd-br .vd-nav{height:44px;padding:0 14px}
.vd-br .vd-brand{font-size:13px}
.vd-br .vd-mark{width:16px;height:20px}

/* ── page furniture: eyebrow, titles, rows, pills, forms ─────────────────── */
.vd-pg{padding:12px 12px 16px;display:grid;gap:8px;align-content:start;position:relative}
.vd-br .vd-pg{padding:16px 18px 18px;gap:10px}
.vd-eyebrow{font-size:7.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rose,#B76E79)}
.vd-h1{font-family:var(--serif,'Fraunces'),serif;font-size:20px;line-height:1.08;letter-spacing:-.02em;color:var(--ink,#22252A)}
.vd-h1 em{color:var(--rose,#B76E79)}
.vd-br .vd-h1{font-size:24px}
.vd-h2{font-family:var(--serif,'Fraunces'),serif;font-size:14px;color:var(--ink,#22252A)}
.vd-h2 b{font-size:9px;font-weight:400;color:var(--slate,#5F6B7A);font-family:var(--sans,'Inter'),system-ui,sans-serif;margin-left:2px}
.vd-h3{font-family:var(--serif,'Fraunces'),serif;font-size:12.5px;color:var(--ink,#22252A)}
.vd-p{font-size:9px;line-height:1.45;color:var(--slate,#5F6B7A)}
.vd-note .vd-p{font-size:10px;max-width:360px}
.vd-note{gap:8px}
.vd-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.vd-txt{font-size:8.5px;font-weight:600;color:var(--pop,#8A1428)}
.vd-txt.danger{color:#8A1428}
.vd-mtabs{display:flex;gap:4px;overflow:hidden}
.vd-mtabs span{font-size:8px;padding:3px 8px;white-space:nowrap;border:1px solid var(--line,#E5DDD6);border-radius:99px;background:#fff;white-space:nowrap}
.vd-mtabs b{font-weight:400;color:var(--slate,#5F6B7A)}
.vd-tabs-m{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;background:var(--cream,#F4EDE7);border:1px solid var(--line,#E5DDD6);border-radius:12px}
.vd-tabs-m span{display:grid;gap:1px;justify-items:center;padding:5px 6px;border-radius:9px;font-size:9.5px;font-weight:600;color:var(--slate,#5F6B7A);text-align:center}
.vd-tabs-m small{font-size:7px;font-weight:400}
.vd-tabs-m .on{background:#fff;color:var(--pop,#8A1428);box-shadow:0 1px 2px rgba(34,37,42,.08)}
.vd-door{max-width:380px;margin:0 auto;width:100%;display:grid;gap:10px}

/* the register door's four-step rail, as _door-register.php prints it */
.vd-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;position:relative;margin-top:2px}
.vd-rail::before{content:"";position:absolute;left:12.5%;right:12.5%;top:9px;height:1.5px;background:var(--rose-soft,#E8C7CC)}
.vd-rail-s{display:grid;justify-items:center;gap:3px;font-size:7.5px;font-weight:600;color:var(--slate,#5F6B7A);text-align:center;position:relative}
.vd-rail-s i{width:19px;height:19px;border-radius:50%;background:#fff;border:1px solid var(--rose-soft,#E8C7CC);display:flex;align-items:center;justify-content:center;font-size:8px;font-style:normal;color:var(--rose-deep,#C25E63)}
.vd-rail-s.on{color:var(--ink,#22252A)}
.vd-rail-s.on i{background:var(--pop,#8A1428);border-color:var(--pop,#8A1428);color:#fff}
.vd-rail-s.done i{background:var(--rose,#B76E79);border-color:var(--rose,#B76E79);color:#fff}
.vd-mstep-t{font-size:15px;margin-top:2px}
.vd-mnav{display:flex;gap:6px;grid-column:1/-1}
.vd-mnav .vd-btn{flex:1 1 auto}

.vd-mform{display:grid;gap:7px}
.vd-mform.two{grid-template-columns:1fr 1fr;gap:8px 10px}
.vd-f{display:grid;gap:3px}
.vd-f.wide,.vd-mform.two .vd-btn.wide{grid-column:1/-1}
.vd-l{font-size:8.5px;font-weight:600;color:var(--ink,#22252A)}
.vd-l small{font-weight:400;color:var(--slate,#5F6B7A);font-size:8px}
.vd-in{display:block;height:26px;border:1px solid var(--line,#E5DDD6);border-radius:7px;background:#fff;position:relative;overflow:hidden}
.vd-in.ta{height:44px}
.vd-type{position:absolute;left:8px;top:50%;height:6px;margin-top:-3px;border-radius:3px;background:var(--ink,#22252A);opacity:.7;width:var(--w,50%)}
.vd-in.ta .vd-type{top:12px;margin-top:0}
.vd-dots{background:repeating-linear-gradient(90deg,var(--ink,#22252A) 0 4px,transparent 4px 7px)}
.vd-ph-text{position:absolute;left:8px;top:50%;translate:0 -50%;font-size:8.5px;font-style:normal;color:var(--slate,#5F6B7A);white-space:nowrap}
.vd-mrule{display:flex;align-items:center;gap:5px;font-size:8px;color:var(--ink,#22252A);margin-top:2px}
.vd-mrule i,.vd-ack i{width:14px;height:14px;border-radius:50%;background:var(--pop,#8A1428);border:1px solid var(--pop,#8A1428);display:inline-flex;align-items:center;justify-content:center;flex:none}
.vd-ack i{border-radius:4px}
.vd-mrule svg,.vd-ack svg{width:9px;height:9px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.vd-ack{display:flex;align-items:center;gap:6px;min-height:17px;font-size:9px;color:var(--ink,#22252A)}
.vd-ack b{display:block;height:5px;border-radius:3px;background:var(--line,#E5DDD6);width:var(--w,70%)}
.vd-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:28px;padding:0 14px;border-radius:99px;background:var(--pop,#8A1428);color:#fff;font-size:9.5px;font-weight:600;justify-self:start;white-space:nowrap;box-shadow:0 6px 14px rgba(34,37,42,.16)}
.vd-btn svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vd-btn.wide{justify-self:stretch}
.vd-btn.ghost{background:#fff;color:var(--ink,#22252A);border:1px solid var(--line,#E5DDD6);box-shadow:none}
.vd-btn.sm{min-height:22px;padding:0 10px;font-size:8.5px}
.vd-sel{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border:1px solid var(--line,#E5DDD6);border-radius:7px;background:#fff;font-size:8.5px;color:var(--ink,#22252A);justify-self:start;white-space:nowrap}
.vd-sel svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;margin-left:auto}
.vd-sel.vd-pick{display:inline-grid;grid-template-columns:auto 1fr auto;align-items:center}
.vd-pick i,.vd-pick em{grid-area:1/1;font-style:normal}
.vd-pick i{opacity:0}
.vd-pick svg{grid-area:1/3}
.vd-flash{position:absolute;left:50%;bottom:14px;translate:-50% 0;background:var(--ink,#22252A);color:#fff;font-size:9px;font-weight:500;padding:6px 12px;border-radius:99px;white-space:nowrap;z-index:4}
.vd-ph .vd-flash{bottom:94px}
.vd-flash.in{position:static;translate:none;justify-self:start;background:#fff;color:var(--ink,#22252A);border:1px solid var(--line,#E5DDD6);white-space:normal;line-height:1.3}
.vd-fs{display:grid;gap:6px;background:#fff;border:1px solid var(--line,#E5DDD6);border-radius:12px;padding:12px;max-width:360px}
.vd-fs .vd-p{margin-bottom:2px}
.vd-ssn{display:grid;gap:6px;background:#fff;border:1px solid var(--line,#E5DDD6);border-radius:12px;padding:12px}
.vd-ss{display:grid;gap:5px;background:#fff;border:1px solid var(--line,#E5DDD6);border-radius:10px;padding:9px 10px;font-size:9px}
.vd-ss b{font-size:10px}
.vd-ss-acts{display:flex;gap:9px}
.vd-ss-cad{display:flex;align-items:center;gap:6px}
.vd-ss-cad small{font-size:8px;color:var(--slate,#5F6B7A)}

/* ── the listing card, as _lcard.php draws it ────────────────────────────── */
.vd-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.vd-c{background:#fff;border:1px solid var(--line,#E5DDD6);border-radius:12px;overflow:hidden;color:var(--ink,#22252A)}
.vd-c-ph{position:relative;aspect-ratio:4/3;background:var(--blush,#F6EAEB);overflow:hidden}
.vd-c-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vd-c-st{position:absolute;top:6px;left:6px;font-size:6.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;background:rgba(255,255,255,.94);border-radius:99px;padding:3px 7px;color:var(--rose-deep,#C25E63)}
.vd-c-rep{position:absolute;bottom:6px;right:6px;font-size:6.5px;font-weight:600;background:rgba(24,26,30,.72);color:#fff;border-radius:99px;padding:3px 7px;white-space:nowrap}
.vd-c-heart{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 5px rgba(0,0,0,.14);color:var(--pop,#8A1428)}
.vd-c-heart svg{width:13px;height:13px;fill:currentColor;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round;transform-origin:center}
.vd-c-b{padding:8px 9px 9px;display:grid;gap:2px}
.vd-c-pr{display:flex;align-items:center;justify-content:space-between;gap:6px;font-family:var(--serif,'Fraunces'),serif;font-size:12px;font-weight:600}
.vd-c-pr small{font-family:var(--sans,'Inter'),system-ui,sans-serif;font-size:6px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--clay,#8A7268)}
.vd-c-mk img{width:26px;height:auto;display:block}
.vd-c-mk .rmls-mark{font-size:7px;font-weight:700;letter-spacing:.08em}
.vd-c-ad{font-size:8.5px}
.vd-c-ad span{color:var(--slate,#5F6B7A)}
.vd-c-sp{font-size:7.5px;color:var(--slate,#5F6B7A)}
.vd-c-co{font-size:6.5px;color:var(--slate,#5F6B7A);margin-top:2px}
.vd-ph .vd-c-st{font-size:8px;top:9px;left:9px;padding:4px 9px}
.vd-ph .vd-c-rep{font-size:8px;bottom:9px;right:9px;padding:4px 9px}
.vd-ph .vd-c-heart{width:30px;height:30px;top:8px;right:8px}
.vd-ph .vd-c-heart svg{width:16px;height:16px}
.vd-ph .vd-c-b{padding:10px 12px 12px;gap:3px}
.vd-ph .vd-c-pr{font-size:15px}
.vd-ph .vd-c-pr small{font-size:7px}
.vd-ph .vd-c-mk img{width:32px}
.vd-ph .vd-c-ad{font-size:10.5px}
.vd-ph .vd-c-sp{font-size:9px}
.vd-ph .vd-c-co{font-size:7.5px}
/* the pointer lives inside the heart it lands on, so it finds it at any width */
.vd-cursor{position:absolute;left:0;top:0;width:14px;height:17px;fill:#111;stroke:#fff;stroke-width:1.2;stroke-linejoin:round;translate:6px 9px;z-index:5;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}

/* the saved list: the empty state and the landed card share one slot, so the
   card arrives where the words were (the real page prints one or the other) */
.vd-slot{display:grid}
.vd-slot>*{grid-area:1/1}
.vd-empty{display:grid;justify-items:center;gap:6px;padding:18px 12px;text-align:center;font-size:9px;line-height:1.4;color:var(--slate,#5F6B7A);opacity:0}
.vd-empty b{display:block;color:var(--ink,#22252A);font-size:10px}
.vd-empty-i{width:30px;height:30px;border-radius:50%;background:var(--blush,#F6EAEB);display:flex;align-items:center;justify-content:center}
.vd-empty-i svg{width:15px;height:15px;fill:none;stroke:var(--rose,#B76E79);stroke-width:1.8;stroke-linejoin:round}
.vd-c.vd-land{position:relative;z-index:1}

/* the phone with two screens: the first, then the one it slides to */
.vd-track{display:flex;width:200%;height:100%;translate:-50% 0}
.vd-scr{width:50%;flex:none;overflow:hidden}

/* ── the mail app, webmail, a notification, and the email design in miniature ── */
.vd-ma{position:absolute;inset:34px 0 0;background:#fff;display:grid;align-content:start}
.vd-ma-bar{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-bottom:1px solid var(--line,#E5DDD6);font-size:10.5px;color:var(--ink,#22252A);white-space:nowrap;overflow:hidden}
.vd-ma-bar b{font-size:15px}
.vd-ma-bar svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.vd-ma-row{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line,#E5DDD6);align-items:flex-start}
.vd-ma-row.on{background:var(--blush,#F6EAEB)}
.vd-ma-av{width:28px;height:28px;border-radius:50%;background:var(--cream,#F4EDE7);flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--pop,#8A1428)}
.vd-ma-row.new .vd-ma-av{background:var(--blush,#F6EAEB)}
.vd-ma-row.on .vd-ma-av{background:#fff}
.vd-ma-tx{display:grid;gap:3px;flex:1 1 auto;min-width:0}
.vd-ma-tx b{font-size:9.5px}
.vd-ma-tx span{font-size:9px;color:var(--ink,#22252A)}
.vd-ma-tx small{font-size:8.5px;color:var(--slate,#5F6B7A)}
.vd-ma-tx b:empty,.vd-ma-tx span:empty,.vd-ma-tx small:empty{height:6px;border-radius:3px;background:var(--line,#E5DDD6);width:var(--w,60%);margin:2px 0}
.vd-ma-open{position:absolute;inset:34px 0 0;background:var(--paper,#FAF7F4);display:grid;align-content:start;z-index:2}
.vd-ntf{position:absolute;left:10px;right:10px;top:40px;display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:18px;background:rgba(255,255,255,.97);box-shadow:0 12px 30px -10px rgba(34,37,42,.4),0 0 0 1px rgba(34,37,42,.06);z-index:6}
.vd-ntf .vd-ma-tx span,.vd-ntf .vd-ma-tx small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vd-pg.vd-under{padding-top:84px}  /* the page under a notification: its words start below it */
.vd-ntf .vd-ma-av{background:var(--blush,#F6EAEB)}
.vd-wm{display:grid;grid-template-columns:176px minmax(0,1fr);height:100%}
.vd-wm-l .vd-ma-tx b,.vd-wm-l .vd-ma-tx span,.vd-wm-l .vd-ma-tx small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vd-wm-l{border-right:1px solid var(--line,#E5DDD6);background:#fff;overflow:hidden}
.vd-wm-r{padding:14px 16px;overflow:hidden;display:grid;gap:10px;align-content:start}
.vd-wm-h{display:grid;gap:6px}
.vd-wm-subj{font-size:13px;font-weight:600;color:var(--ink,#22252A)}
.vd-wm-from{display:flex;align-items:center;gap:6px;font-size:9px;color:var(--ink,#22252A)}
.vd-wm-from .vd-ma-av{width:22px;height:22px;font-size:9px;background:var(--blush,#F6EAEB)}
.vd-wm .vd-mail{margin:0;max-width:360px}
.vd-mail{margin:10px;background:#fff;border:1px solid #E5DDD6;border-radius:12px;overflow:hidden;color:#3D434C}
.vd-mail-h{background:#22252A;padding:10px 12px;display:grid;gap:1px}
.vd-mail-h b{font-family:var(--serif,'Fraunces'),serif;font-size:12px;font-weight:400;color:#fff}
.vd-mail-h i{font-family:var(--serif,'Fraunces'),serif;font-size:8px;color:#E8C7CC}
.vd-mail-b{padding:12px 12px 10px;display:grid;gap:7px;justify-items:start}
.vd-mail-t{font-family:var(--serif,'Fraunces'),serif;font-size:14px;color:#22252A}
.vd-mail-t em{color:#B76E79;font-style:normal}
.vd-mail-b p{font-size:9px;line-height:1.45}
.vd-mail-n{font-size:8px;color:#5F6B7A}
.vd-mail .vd-btn{background:#22252A;box-shadow:none}
.vd-mail-f{padding:8px 12px 10px;border-top:1px solid #E5DDD6;font-size:7.5px;color:#5F6B7A}
.vd-mail-f b{color:#22252A}
.vd-mcard{border:1px solid #E5DDD6;border-radius:10px;overflow:hidden;background:#fff;justify-self:stretch}
.vd-mcard img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.vd-mcard-b{padding:9px 10px 10px;display:grid;gap:3px;justify-items:start}
.vd-pill-row{margin-bottom:2px}
.vd-pill{display:inline-block;padding:2px 7px;border-radius:99px;background:#C25E63;color:#fff;font-size:7px;line-height:1.4;font-weight:600;letter-spacing:.06em;text-transform:uppercase;transform-origin:center}
.vd-mcard-t{font-size:11px;font-weight:600;color:#22252A}
.vd-mcard-pl{font-size:8.5px;color:#5F6B7A}
.vd-mcard-pr{font-size:13px;font-weight:600;color:#22252A}
.vd-stat{display:flex;margin:4px 0 6px}
.vd-stat span{display:grid;padding:0 10px;border-right:1px solid #E5DDD6}
.vd-stat span:first-child{padding-left:0}
.vd-stat span:last-child{border-right:0}
.vd-stat b{font-size:10px;color:#22252A}
.vd-stat small{font-size:6.5px;letter-spacing:.06em;text-transform:uppercase;color:#5F6B7A}

/* ── the portal's controls ───────────────────────────────────────────────── */
.vd-vhome{display:grid;gap:8px}
.vd-vhome.two{grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.vd-vctl{display:grid;gap:7px}
.vd-chips{display:flex;gap:4px}
.vd-chip{border:1px solid var(--line,#E5DDD6);border-radius:99px;padding:3px 9px;font-size:8.5px;background:#fff}
.vd-chip.yes.on{background:var(--pop,#8A1428);color:#fff;border-color:var(--pop,#8A1428)}
.vd-stars{display:flex;gap:2px}
.vd-stars i{width:14px;height:14px;display:block}
.vd-stars svg{width:14px;height:14px;fill:var(--line,#E5DDD6)}
.vd-stars i:nth-child(-n+4) svg{fill:var(--rose-deep,#C25E63)}

/* ── motion: each frame's own little film, restarted when it comes on ────── */
@media (prefers-reduced-motion:no-preference){
  .vd-frame.is-on .vd-type{animation:vd-type .9s cubic-bezier(.3,0,.2,1) var(--d,0s) both}
  .vd-frame.is-on .vd-mrule i,.vd-frame.is-on .vd-ack i{animation:vd-tick .35s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
  .vd-frame.is-on .vd-btn[style]{animation:vd-press .5s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
  .vd-frame.is-on .vd-ma-row.new{animation:vd-drop .5s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
  .vd-frame.is-on .vd-ntf{animation:vd-drop .55s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
  .vd-frame.is-on .vd-wm-r{animation:vd-rise .5s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
  .vd-frame.is-on .vd-ma-open{animation:vd-up .55s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
  .vd-frame.is-on .vd-c[style]{animation:vd-rise .5s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
  .vd-frame.is-on .vd-c-heart.is-filling svg{animation:vd-heart .5s cubic-bezier(.2,.8,.2,1) 1.2s both}
  .vd-frame.is-on .vd-c-heart.is-filling::after{content:"";position:absolute;inset:-9px;border-radius:50%;background:var(--pop,#8A1428);opacity:0;animation:vd-tap .55s ease-out 1s both}
  .vd-frame.is-on .vd-cursor{animation:vd-cursor 1.4s cubic-bezier(.3,0,.2,1) both}
  .vd-frame.is-on .vd-flash{animation:vd-rise .4s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
  .vd-frame.is-on .vd-land{animation:vd-land .6s cubic-bezier(.2,.8,.2,1) var(--land) both}
  .vd-frame.is-on .vd-empty{animation:vd-fade-out .35s ease-out var(--land) both}
  .vd-frame.is-on .vd-ph-two .vd-track{animation:vd-slide .5s cubic-bezier(.4,0,.2,1) var(--slide,2.1s) both}
  .vd-frame.is-on .vd-pick i{animation:vd-fade-out .25s var(--d,0s) both}
  .vd-frame.is-on .vd-pick em{animation:vd-fade-in .25s var(--d,0s) both}
  .vd-frame.is-on .vd-ss{animation:vd-rise .5s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
  .vd-frame.is-on .vd-pill.flip{animation:vd-flip .6s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
  .vd-frame.is-on .vd-chip.on{animation:vd-press .5s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
  .vd-frame.is-on .vd-stars i:nth-child(-n+4) svg{animation:vd-star .3s ease-out both;animation-delay:calc(1.3s + var(--n,0) * .12s)}
  .vd-stars i:nth-child(2){--n:1}.vd-stars i:nth-child(3){--n:2}.vd-stars i:nth-child(4){--n:3}
  @media (min-width:1240px){
    /* the browser already shows the first screen: the phone rests on the second */
    .vd-frame.is-on .vd-ph-two .vd-track{animation:none}
  }
  @keyframes vd-type{from{width:0}to{width:var(--w,50%)}}
  @keyframes vd-tick{from{background:#fff;border-color:var(--line,#E5DDD6)}to{background:var(--pop,#8A1428);border-color:var(--pop,#8A1428)}}
  @keyframes vd-press{0%{opacity:0;transform:translateY(4px)}60%{opacity:1;transform:none}80%{transform:scale(.96)}100%{transform:none}}
  @keyframes vd-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes vd-drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
  @keyframes vd-up{from{transform:translateY(102%)}to{transform:none}}
  @keyframes vd-heart{0%{fill:transparent;transform:scale(1)}50%{transform:scale(1.35)}100%{fill:currentColor;transform:scale(1)}}
  @keyframes vd-tap{0%{opacity:.35;transform:scale(.4)}100%{opacity:0;transform:scale(1.5)}}
  @keyframes vd-cursor{0%{translate:-120px 96px}70%{translate:6px 9px}80%{translate:6px 9px;transform:scale(.88)}100%{translate:6px 9px;transform:none}}
  @keyframes vd-land{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
  @keyframes vd-slide{from{translate:0 0}to{translate:-50% 0}}
  @keyframes vd-fade-out{from{opacity:1}to{opacity:0}}
  @keyframes vd-fade-in{from{opacity:0}to{opacity:1}}
  @keyframes vd-flip{from{transform:rotateX(90deg);opacity:0}to{transform:none;opacity:1}}
  @keyframes vd-star{from{fill:var(--line,#E5DDD6);transform:scale(.8)}to{fill:var(--rose-deep,#C25E63);transform:none}}
}