/* WanderBuddy live demo (wanderbuddyapp.com/demo/).
   A guided simulator of the app as it ships: the phone is rebuilt from the
   Flutter code (lib/theme/app_colors.dart dark palette, WbText, WbListRow,
   WbStatus), the side panes say where you are and what to tap.
   ?embed=1 renders the phone screen alone for the landing page's globe.
   ?deck=1 renders the console alone, sized to the frame, for the investor web deck. */

@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/BricolageGrotesque-var-latin.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Geist";src:url(/fonts/Geist-var-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/fonts/GeistMono-var-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/Inter-var-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/fonts/InstrumentSerif-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"WB Icons";src:url(/demo/media/icons.woff2) format("woff2");font-weight:100 700;font-display:block}

:root{
  /* Layout: one page, one console. Chapters left, phone centre, guide right. */
  --bg:#090E15; --surface:#111A26; --surface2:#172231;
  --line:rgba(236,242,248,.09); --line2:rgba(236,242,248,.16);
  --ink:#EEF3F8; --muted:#9AABBC; --dim:#6F8193;
  --amber:#35C9BC; --azure:#3FA7E6;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:8px}
.wrap{max-width:1240px;margin:0 auto;padding-inline:20px}
@media (min-width:768px){.wrap{padding-inline:32px}}

/* ---------- Header ---------- */
.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 18px/1 var(--display);letter-spacing:-.02em}
.mark{width:28px;height:28px;flex:none}
.top nav{display:flex;align-items:center;gap:22px;font-size:14px}
.top nav a{text-decoration:none;color:var(--muted);transition:color .2s}
.top nav a:hover{color:var(--ink)}
.top nav .pill{color:var(--bg)}
@media (max-width:560px){.top nav .q{display:none}}

.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;border-radius:999px;border:1px solid transparent;padding:12px 22px;font:500 15px/1.2 var(--sans);text-decoration:none;cursor:pointer;background:var(--ink);color:var(--bg);transition:background-color .2s,color .2s,border-color .2s,transform .15s}
.pill.sm{padding:9px 16px;font-size:14px}
.pill:hover{background:var(--amber);color:#1b1203}
.pill:active{transform:translateY(1px) scale(.99)}
.pill.ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.pill.ghost:hover{background:rgba(236,242,248,.06);border-color:rgba(236,242,248,.3)}
.textbtn{border:0;background:none;padding:0;color:var(--muted);font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.textbtn:hover{color:var(--ink)}

.demo-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-block:8px 18px}
.demo-head h1{margin:0;font:600 clamp(32px,4vw,46px)/1.02 var(--display);letter-spacing:-.03em}
.demo-head p{margin:8px 0 0;color:var(--muted);font-size:16px;max-width:56ch}
.progress{display:flex;align-items:center;gap:12px;font:500 13px/1 var(--mono);color:var(--muted)}
.progress .bar{width:160px;height:4px;border-radius:2px;background:var(--line2);overflow:hidden}
.progress .bar i{display:block;height:100%;width:0;background:var(--amber);border-radius:2px;transition:width .5s cubic-bezier(.2,.8,.2,1)}

/* ---------- Console ---------- */
.console{display:grid;grid-template-columns:232px minmax(0,1fr) 380px;border:1px solid var(--line2);border-radius:28px;background:linear-gradient(180deg,#0E1621,#0B121B);overflow:hidden;position:relative;margin-bottom:48px}
.console::before{content:"";position:absolute;left:50%;top:44%;width:520px;height:520px;margin:-260px 0 0 -260px;background:radial-gradient(closest-side,rgba(63,167,230,.13),transparent 72%);pointer-events:none}
.c-nav{padding:14px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;position:relative;z-index:1}
.c-nav .grp{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:14px 12px 6px}
.c-nav .grp:first-child{padding-top:6px}
.c-nav button{display:flex;align-items:center;gap:12px;width:100%;padding:9px 12px;border:0;border-radius:12px;background:none;cursor:pointer;color:var(--muted);font-size:14px;text-align:left;transition:background-color .2s,color .2s}
.c-nav button:hover{color:var(--ink);background:rgba(236,242,248,.04)}
.c-nav button .ic{font-size:19px}
.c-nav button .ok{margin-left:auto;font-size:16px;color:var(--azure);opacity:0}
.c-nav button.done .ok{opacity:1}
.c-nav button[aria-current="true"]{background:var(--ink);color:var(--bg)}
.c-nav button[aria-current="true"] .ok{color:#2a6f9e}
.c-nav .c-foot{margin-top:auto;padding:16px 12px 6px;font-size:12px;line-height:1.5;color:var(--dim)}
.c-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:28px 24px;min-width:0;position:relative;z-index:1}
.c-detail{border-left:1px solid var(--line);padding:28px 28px 24px;display:flex;flex-direction:column;min-width:0;position:relative;z-index:1}
.who{display:flex;align-items:center;gap:14px}
.who .av{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--surface2);border:1px solid var(--line);font-size:22px;color:var(--azure);flex:none}
.who b{display:block;font:600 19px/1.2 var(--display);letter-spacing:-.015em}
.who span{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.callout{margin-top:18px;display:grid;grid-template-columns:22px 1fr;gap:12px;padding:15px 17px;border-radius:16px;background:linear-gradient(180deg,rgba(63,167,230,.14),rgba(63,167,230,.07));border:1px solid rgba(63,167,230,.26);font-size:14.5px;line-height:1.5}
.callout .ic{color:var(--azure);font-size:20px;margin-top:1px}
.callout b{font-weight:600}
.kv{margin:14px 0 0;padding:0;list-style:none}
.kv li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv li:last-child{border-bottom:0}
.kv li span{color:var(--muted)}
.kv li b{font-weight:500;text-align:right}
.kv li b.hot{color:var(--amber)}
.kv li b.ok{color:#35C9BC}
/* The one instruction that matters right now: where to tap. */
.todo{margin-top:18px}
.todo .card{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:center;padding:16px 18px;border-radius:18px;background:rgba(53,201,188,.10);border:1px solid rgba(53,201,188,.38)}
.todo .card .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(53,201,188,.18);color:var(--amber);font-size:22px}
.todo .card .ic::before{line-height:40px}
.todo .card small{display:block;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin-bottom:6px}
.todo .card p{margin:0;font-size:15.5px;line-height:1.4;font-weight:500}
.todo .row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px}
.todo .away{display:none;margin-top:10px}
.todo.off-screen .away{display:flex}
.todo.finished .card{background:rgba(53,201,188,.10);border-color:rgba(53,201,188,.38)}
.todo.finished .card .ic{background:rgba(53,201,188,.18);color:#35C9BC}
.todo.finished .card small{color:#35C9BC}
.stores{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.swap{animation:paneIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes paneIn{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Phone-width instruction strip, shown above the phone when the panes stack. */
.mtodo{display:none;width:100%;max-width:360px;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:rgba(53,201,188,.10);border:1px solid rgba(53,201,188,.38);font-size:14px;font-weight:500;line-height:1.35}
.mtodo .ic{color:var(--amber);font-size:20px}

@media (max-width:1180px){
  .console{grid-template-columns:minmax(0,1fr) 360px}
  .c-nav{grid-column:1 / -1;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);scrollbar-width:none}
  .c-nav::-webkit-scrollbar{display:none}
  .c-nav button{width:auto;flex:none;padding:9px 14px}
  .c-nav .grp,.c-nav .c-foot,.c-nav button .ok{display:none}
}
@media (max-width:820px){
  .console{grid-template-columns:1fr}
  .c-detail{border-left:0;border-top:1px solid var(--line);padding:22px 20px}
  .c-stage{padding:22px 12px 28px}
  .c-stage .device{--s:.8}
  .mtodo{display:flex}
}
@media (max-width:400px){.c-stage .device{--s:.74}}

/* ---------- Device ---------- */
.device{--w:390px;--h:844px;--s:.78;position:relative;width:calc(var(--w) * var(--s));height:calc(var(--h) * var(--s));flex:none}
.device .frame{position:absolute;top:0;left:0;width:var(--w);height:var(--h);transform:scale(var(--s));transform-origin:0 0;border-radius:58px;background:#0B141F;box-shadow:0 0 0 11px #04070b,0 0 0 12px rgba(236,242,248,.14),0 60px 120px -40px rgba(0,0,0,.9),0 30px 60px -30px rgba(0,0,0,.6);overflow:hidden;isolation:isolate}
.device .island{position:absolute;top:11px;left:50%;width:122px;height:35px;margin-left:-61px;border-radius:20px;background:#000;z-index:60}
.device .homebar{position:absolute;bottom:8px;left:50%;width:134px;height:5px;margin-left:-67px;border-radius:3px;background:rgba(231,241,250,.72);z-index:60;pointer-events:none}

/* ================= The app ================= */
.app{
  --a-bg:#0B141F; --a-subtle:#12202E; --a-surface:#17293B;
  --a-primary:#3FA7E6; --a-on-primary:#06121C;
  --a-accent:#F0A431; --a-teal:#35C9BC;
  --a-muted:#8DA7BC; --a-text:#E7F1FA; --a-border:#25394C; --a-danger:#FF6B5E;
  --a-tonal:#0E3B38; --a-on-tonal:#B6EFE8; --a-err:#FFB4AB; --a-green:#66BB6A;
  position:absolute;inset:0;background:var(--a-bg);color:var(--a-text);font:16px/1.5 "Inter",ui-sans-serif,system-ui,sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none;cursor:default
}
.app button{border:0;background:none;padding:0;cursor:pointer;font:inherit;color:inherit;letter-spacing:inherit}
.ic{font-family:"WB Icons";font-weight:400;font-style:normal;font-size:24px;line-height:1;display:inline-block;width:1em;height:1em;text-align:center;font-variation-settings:"FILL" 0,"wght" 400;-webkit-font-smoothing:antialiased;flex:none}
.ic.f{font-variation-settings:"FILL" 1,"wght" 400}
.ic::before{display:block}

.sbar{position:absolute;top:0;left:0;right:0;height:54px;display:flex;justify-content:space-between;align-items:center;padding:0 30px 0 44px;z-index:50;font:600 16px/1 "Inter",sans-serif;pointer-events:none}
.sbar .r{display:flex;gap:5px;align-items:center}
.sbar .r .ic{font-size:18px}
.layer{position:absolute;inset:0;padding-top:54px;display:flex;flex-direction:column;background:var(--a-bg);transition:transform .38s cubic-bezier(.2,.8,.2,1),opacity .3s}
.layer.right{transform:translateX(102%);pointer-events:none}
.layer.left{transform:translateX(-25%);opacity:0;pointer-events:none}
#L-trip,#L-talk,#L-reels{background:linear-gradient(var(--a-surface) 54px,var(--a-bg) 54px)}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;position:relative}
.scroll::-webkit-scrollbar{display:none}

/* Home */
.h-head{display:flex;align-items:center;gap:12px;padding:12px 8px 8px 24px}
.av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--a-surface);font-weight:600;font-size:16px;flex:none}
.h-head b{font-size:18px;font-weight:600;flex:1}
.ibtn{width:48px;height:48px;display:grid;place-items:center;position:relative;border-radius:50%}
.badge{position:absolute;top:6px;right:5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--a-err);color:#690005;font:600 11px/16px "Inter",sans-serif;text-align:center}
.h-list{padding:8px 24px 120px}
.tripcard{background:var(--a-surface);border:1px solid var(--a-border);border-radius:12px;padding:24px}
.serif{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:46px;line-height:1.05;letter-spacing:-.92px}
.tripcard .when{margin-top:4px;font-size:14px;color:var(--a-muted)}
.tripcard .sum{margin-top:8px;font-size:16px}
.tripcard .rows{margin-top:8px}
.wbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;border-radius:12px;padding:12px 24px;font:600 16px/1.2 "Inter",sans-serif !important}
.wbtn.pri{background:var(--a-primary);color:var(--a-on-primary) !important}
.wbtn.sec{border:1px solid var(--a-border) !important;color:var(--a-text)}
.tripcard .wbtn{margin-top:24px}
.over{margin:32px 0 8px;font-size:12px;font-weight:500;letter-spacing:.72px;text-transform:uppercase;color:var(--a-muted);display:flex;justify-content:space-between;align-items:baseline}
.over em{font-style:normal;text-transform:none;letter-spacing:0;font-size:14px;font-weight:400}
.fab{position:absolute;right:16px;bottom:96px;width:56px;height:56px;border-radius:16px;background:var(--a-text);color:var(--a-bg);display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.35);z-index:5}
.navbar{height:80px;background:var(--a-subtle);display:grid;grid-template-columns:1fr 1fr;padding-bottom:6px;flex:none}
.navbar span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;font-weight:500;color:var(--a-muted)}
.navbar .pillind{width:64px;height:32px;border-radius:16px;display:grid;place-items:center;position:relative;flex-direction:row}
.navbar .on{color:var(--a-text)}
.navbar .on .pillind{background:var(--a-tonal)}
.navbar .dotb::after{content:"";position:absolute;top:4px;right:18px;width:6px;height:6px;border-radius:50%;background:var(--a-err)}

/* WbListRow + WbStatus */
.lr{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--a-border);width:100%;text-align:left}
.lr:last-child{border-bottom:0}
.lr .li{font-size:24px;color:var(--a-text)}
.lr .tx{flex:1;min-width:0}
.lr .tx b{display:block;font-weight:400;font-size:16px;line-height:1.4}
.lr .tx small{display:block;margin-top:4px;font-size:14px;line-height:1.45;color:var(--a-muted)}
.lr .chev{color:var(--a-muted)}
.st{display:inline-flex;align-items:center;gap:4px;font-size:14px;white-space:nowrap}
.st .ic{font-size:16px}
.st.ok{color:var(--a-teal)} .st.att{color:var(--a-accent)} .st.up{color:var(--a-muted)}

/* Trip shell */
.appbar{height:56px;display:grid;grid-template-columns:56px 1fr 56px;align-items:center;background:var(--a-surface);flex:none}
.appbar .ibtn{margin-left:4px}
.appbar b{text-align:center;font-size:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabs{display:grid;grid-template-columns:repeat(5,1fr);background:var(--a-surface);border-bottom:1px solid var(--a-border);flex:none}
.tabs button{height:48px;font-size:14px;font-weight:500;color:var(--a-muted);position:relative}
.tabs button.on{color:var(--a-primary)}
.tabs button.on::after{content:"";position:absolute;left:50%;bottom:0;width:var(--uw,40px);margin-left:calc(var(--uw,40px) / -2);height:3px;border-radius:3px 3px 0 0;background:var(--a-primary)}
.tabp{display:none;flex:1;flex-direction:column;min-height:0;position:relative}
.tabp.on{display:flex;animation:tabIn .35s ease both}
@keyframes tabIn{from{opacity:.001;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Plan */
.pad{padding:8px 24px 96px}
.vibe{display:flex;align-items:center;gap:6px;padding:8px 0 0;font-size:14px;color:var(--a-muted)}
.vibe span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vibe .ic{font-size:20px}
.dayh{display:flex;justify-content:space-between;align-items:center;margin:32px 0 4px;font-size:12px;font-weight:500;letter-spacing:.72px;text-transform:uppercase;color:var(--a-muted)}
.wx{display:flex;align-items:center;gap:4px;font-size:12px;letter-spacing:.2px;text-transform:none}
.wx .ic{font-size:16px;color:var(--a-primary)}
.stop{display:grid;grid-template-columns:48px 1fr auto;gap:0 12px;padding:14px 0;border-bottom:1px solid var(--a-border);align-items:start}
.stop .tcol{display:flex;flex-direction:column;align-items:center;gap:4px}
.stop .em{width:32px;height:32px;border-radius:50%;background:var(--a-subtle);border:1px solid var(--a-border);display:grid;place-items:center;font-size:16px;line-height:1;overflow:hidden}
.stop .em img{width:100%;height:100%;object-fit:cover}
.stop .tm{font-size:14px;color:var(--a-muted);font-variant-numeric:tabular-nums}
.stop .tx b{display:block;font-weight:400;font-size:16px;line-height:1.4;padding-top:4px}
.stop .tx small{display:block;margin-top:3px;font-size:14px;color:var(--a-muted);line-height:1.45}
.stop .tx .ph{margin-top:8px;height:96px;border-radius:8px;overflow:hidden}
.stop .tx .ph img{width:100%;height:100%;object-fit:cover}
.place{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:4px 8px;border:1px solid var(--a-border);border-radius:999px;font-size:12px;font-weight:500}
.place .ic{font-size:16px;color:var(--a-accent)}
.stop .acts{display:flex;gap:6px;color:var(--a-muted);padding-top:6px}
.stop .acts .ic{font-size:20px}
.stop.leg .tm{padding-top:6px}
.stop.leg .tx b{display:flex;align-items:center;gap:6px}
.stop.leg .tx b .ic{font-size:16px;color:var(--a-muted)}
.stop.leg .acts{padding-top:8px}
.stop.new{animation:flashNew 2.4s ease both}
@keyframes flashNew{0%{background:rgba(53,201,188,.22)}100%{background:transparent}}
.addrow{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center;padding:14px 0;width:100%;text-align:left}
.addrow .ic{justify-self:center}
.minifab{position:absolute;right:16px;bottom:84px;width:40px;height:40px;border-radius:12px;background:var(--a-subtle) !important;display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.35);z-index:4}
.minifab .ic{font-size:22px}
.footbar{padding:12px 24px 22px;background:var(--a-bg);border-top:1px solid var(--a-border);flex:none}

/* Sheets */
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:30;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:31;background:var(--a-subtle);border-radius:28px 28px 0 0;padding:10px 16px 34px;transform:translateY(105%);transition:transform .42s cubic-bezier(.2,.85,.2,1);max-height:80%;display:flex;flex-direction:column}
.sheet.on{transform:none}
.sheet .grab{width:32px;height:4px;border-radius:2px;background:var(--a-muted);opacity:.5;margin:6px auto 14px;flex:none}
.sheet h4{margin:0;font-size:16px;font-weight:500;line-height:1.5}
.sheet .sub{font-size:12px;color:var(--a-muted);margin-top:2px}
.sheet .list{overflow-y:auto;scrollbar-width:none;margin:0 -4px;padding:0 4px}
.autoadd{display:flex;align-items:center;gap:8px;margin:12px 0 4px;font-size:14px}
.autoadd .ic{font-size:16px}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--a-border);font-size:14px;font-weight:500}
.prop{display:grid;grid-template-columns:48px 1fr auto;gap:2px 12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--a-border);transition:opacity .4s,transform .4s,max-height .5s,padding .4s;max-height:100px;overflow:hidden}
.prop:last-child{border-bottom:0}
.prop .thumb{grid-row:1 / 3;width:48px;height:48px;border-radius:12px;overflow:hidden;background:var(--a-bg);border:1px solid var(--a-border);display:grid;place-items:center;font-size:24px;line-height:1}
.prop .thumb img{width:100%;height:100%;object-fit:cover}
.prop b{font-size:14px;font-weight:600;line-height:1.35}
.prop small{grid-column:2;font-size:12px;color:var(--a-muted)}
.prop .tonal{grid-row:1 / 3;grid-column:3;height:40px;padding:0 20px;border-radius:20px;background:var(--a-tonal) !important;color:var(--a-on-tonal) !important;font-size:14px;font-weight:500}
.prop.gone{opacity:0;transform:translateX(30px);max-height:0;padding:0;border:0}
.prop.fresh{animation:flashNew 2.4s ease both}
.snack{position:absolute;left:12px;right:12px;bottom:92px;z-index:45;background:#E7F1FA;color:#0C1622;border-radius:6px;padding:14px 16px;font-size:14px;line-height:1.4;box-shadow:0 6px 20px rgba(0,0,0,.4);transform:translateY(20px);opacity:0;transition:transform .3s,opacity .3s;pointer-events:none}
.snack.on{transform:none;opacity:1}

/* Proposal picture viewer (new: proposals carry an icon or a photo) */
.viewer{position:absolute;inset:0;z-index:40;background:var(--a-surface);padding-top:54px;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .42s cubic-bezier(.2,.85,.2,1)}
.viewer.on{transform:none}
.viewer .vh{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 4px 4px}
.viewer .vh b{font-size:16px;font-weight:600}
.viewer .vbody{flex:1;overflow-y:auto;padding:4px 24px 24px;scrollbar-width:none}
.viewer .pic{border-radius:16px;overflow:hidden;aspect-ratio:4 / 3;background:var(--a-bg);display:grid;place-items:center;font-size:120px;line-height:1}
.viewer .pic img{width:100%;height:100%;object-fit:cover}
.viewer h5{margin:18px 0 4px;font-size:22px;font-weight:600;line-height:1.25}
.viewer .by{font-size:14px;color:var(--a-muted)}
.viewer .src{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--a-subtle);border:1px solid var(--a-border);font-size:14px}
.viewer .src .ic{color:var(--a-primary);font-size:20px}
.viewer .src span{flex:1}
.viewer .src em{font-style:normal;color:var(--a-primary);font-weight:500}
.viewer .pick{margin-top:22px;font-size:12px;font-weight:500;letter-spacing:.72px;text-transform:uppercase;color:var(--a-muted)}
.viewer .emojis{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.viewer .emojis span{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--a-subtle);border:1px solid var(--a-border);font-size:22px}
.viewer .emojis span.photo{width:auto;padding:0 12px;gap:6px;display:flex;font-size:14px;font-weight:500;color:var(--a-primary)}
.viewer .emojis span.photo .ic{font-size:20px}
.viewer .vfoot{padding:12px 24px 30px;border-top:1px solid var(--a-border)}

/* Prepare */
.prep{padding:0 24px 48px}

/* Chat */
.ctool{display:flex;align-items:center;gap:8px;padding:10px 24px;border-bottom:1px solid var(--a-border);font-size:14px;flex:none}
.ctool .ic{font-size:20px;color:var(--a-muted)}
.ctool span{flex:1}
.wa-row{display:flex;align-items:center;gap:10px;padding:8px 4px 8px 24px;border-bottom:1px solid var(--a-border);font-size:14px;color:var(--a-muted);line-height:1.4;flex:none}
.wa-row .ic{font-size:20px}
.wa-row .tb{color:var(--a-primary);font-weight:500;padding:8px}
.wa-row .x{font-size:18px}
.msgs{flex:1;overflow-y:auto;background:#121416;padding:12px 10px 10px;display:flex;flex-direction:column;gap:2px;scrollbar-width:none}
.msgs::-webkit-scrollbar{display:none}
.dpill{align-self:center;background:var(--a-surface);border-radius:12px;padding:4px 12px;font-size:12px;color:var(--a-muted);margin:6px 0 10px}
.msg{display:flex;align-items:flex-end;gap:8px;max-width:84%;margin-top:8px}
.msg .mav{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;flex:none;color:#06121C}
.msg .bw{display:flex;flex-direction:column;gap:3px;min-width:0}
.msg .bb{padding:8px 12px;border-radius:16px;font-size:14px;font-weight:500;line-height:1.4;color:#fff;background:#121416;border:1px solid #1C1E22;overflow-wrap:anywhere}
.msg .meta{font-size:12px;color:#7A7A7A;padding:0 4px}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg.me .bb{background:#1C1E22;border-color:#1C1E22;border-bottom-right-radius:4px}
.msg:not(.me) .bb{border-bottom-left-radius:4px}
.msg.me .meta{text-align:right}
.msg.in{animation:msgIn .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes msgIn{from{opacity:.001;transform:translateY(10px)}to{opacity:1;transform:none}}
.composer{display:flex;align-items:center;gap:2px;padding:8px 8px 26px;background:#121416;border-top:1px solid #1C1E22;flex:none}
.composer .ic{font-size:22px;color:#7A7A7A}
.composer .cb{width:36px;height:40px;display:grid;place-items:center}
.composer .field{flex:1;min-width:0;height:40px;border-radius:20px;border:1px solid #2a2d33;display:flex;align-items:center;padding:0 6px 0 14px;gap:4px;font-size:14px;color:#7A7A7A}
.composer .field span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.composer .field span.typed{color:#fff}
.composer .send .ic{color:var(--a-teal)}

/* Group */
.segbar{display:flex;gap:4px;padding:0 12px;border-bottom:1px solid var(--a-border);flex:none}
.segbar button{padding:12px;font-size:16px;color:var(--a-muted);position:relative}
.segbar button.on{color:var(--a-text);font-weight:600}
.segbar button.on::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--a-primary)}
.gp{display:none;flex:1;min-height:0;flex-direction:column;position:relative}
.gp.on{display:flex}
.bud{padding:16px 16px 100px}
.mcard{background:var(--a-subtle);border:1px solid var(--a-border);border-radius:14px}
.spend{display:flex;align-items:center;gap:14px;padding:16px}
.spend .ic{color:var(--a-primary)}
.spend .tx{flex:1}
.spend .tx small{display:block;font-size:12px;font-weight:500;color:var(--a-muted)}
.spend .tx b{font-size:16px;font-weight:700}
.spend em{font-style:normal;font-size:12px;color:var(--a-muted)}
.qa{display:flex;gap:8px;overflow-x:auto;margin:14px -16px 0;padding:0 16px;scrollbar-width:none}
.qa::-webkit-scrollbar{display:none}
.qa .chip{flex:none;font-size:13px}
.qa .chip .ic{font-size:18px;color:var(--a-primary)}
.bh{margin:22px 0 6px;font-size:16px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.bh small{font-weight:400;font-size:12px;color:var(--a-muted)}
.people{display:flex;flex-wrap:wrap;gap:8px}
.people .chip{padding:0 10px 0 4px;font-size:13px}
.people .chip i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;color:#06121C}
.bal{display:flex;justify-content:space-between;padding:6px 0;font-size:14px}
.bal b{font-weight:600}
.bal b.gb{color:var(--a-green)} .bal b.ow{color:var(--a-err)} .bal b.ok{color:var(--a-muted);font-weight:400}
.settle{padding:12px 14px;margin-top:10px}
.settle h5{margin:0 0 4px;font-size:14px;font-weight:700}
.srow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:6px 0;font-size:14px}
.srow b{font-weight:600}
.srow .tb{color:var(--a-primary);font-size:13px;font-weight:600;padding:6px 8px;border-radius:16px}
.srow.paid{color:var(--a-muted)}
.srow.paid .ic{font-size:16px;vertical-align:-3px;margin-right:4px}
.outbtn{display:inline-flex;align-items:center;gap:8px;margin-top:14px;height:40px;padding:0 16px;border-radius:20px;border:1px solid var(--a-border);color:var(--a-primary);font-size:14px;font-weight:500}
.outbtn .ic{font-size:18px}
.exh{display:flex;justify-content:space-between;margin:14px 0 4px;font-size:12px;font-weight:600;letter-spacing:.4px;color:var(--a-muted);text-transform:uppercase}
.ex{display:grid;grid-template-columns:32px 1fr auto;gap:12px;align-items:center;padding:8px 0}
.ex .ci{width:32px;height:32px;border-radius:50%;background:var(--a-surface);display:grid;place-items:center}
.ex .ci .ic{font-size:18px}
.ex b{display:block;font-size:14px;font-weight:400}
.ex small{font-size:12px;color:var(--a-muted)}
.ex em{font-style:normal;font-size:14px;font-weight:600}
.efab{position:absolute;right:16px;bottom:30px;height:56px;padding:0 20px 0 16px;border-radius:16px;background:var(--a-subtle);border:1px solid var(--a-border);display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;box-shadow:0 6px 16px rgba(0,0,0,.35);z-index:4}
.mem{padding:12px 8px 40px}
.memh{display:flex;justify-content:space-between;align-items:center;padding:4px 8px 8px;font-size:16px;font-weight:500}
.memh .tb{width:40px;height:40px;border-radius:50%;background:var(--a-tonal);color:var(--a-on-tonal);display:grid;place-items:center}
.memh .tb .ic{font-size:20px}
.mrow{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;padding:10px 12px;margin:3px 0}
.mrow .bigav{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#06121C}
.mrow b{font-weight:400;font-size:16px;display:flex;align-items:center;gap:6px}
.role{background:var(--a-tonal);color:var(--a-on-tonal);border-radius:5px;padding:1px 6px;font-size:10px;font-weight:700}
.mrow small{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--a-muted);margin-top:2px}
.mrow small.send{color:var(--a-primary)}
.mrow small .ic{font-size:13px}
.mrow .loc{color:var(--a-muted)}
.mrow .loc.on{color:var(--a-teal)}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px}
.photos img{width:100%;aspect-ratio:1;object-fit:cover}
.reelrow{padding:16px 24px}

/* Map */
.mapwrap{flex:1;position:relative;overflow:hidden;min-height:0}
.mapimg{position:absolute;inset:-4%;background:url(/demo/shots/map_city.jpg) center/cover no-repeat;filter:invert(1) hue-rotate(185deg) brightness(.78) contrast(.92) saturate(.55)}
.mapwrap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,20,31,.25),rgba(11,20,31,0) 30%,rgba(11,20,31,0) 70%,rgba(11,20,31,.45));pointer-events:none}
.mapsvg{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.pin{position:absolute;z-index:3;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px;border:2px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.45);transition:opacity .35s,transform .35s}
.pin.dim{opacity:0;transform:scale(.6)}
.mapsvg path{transition:opacity .35s}
.mapsvg path.dim{opacity:0}
.daychips{position:absolute;top:8px;left:0;right:56px;z-index:5;display:flex;gap:8px;padding:0 12px;overflow-x:auto;scrollbar-width:none}
.daychips::-webkit-scrollbar{display:none}
.daychips .chip{flex:none;background:var(--a-subtle);font-size:13px}
.daychips .chip i{width:12px;height:12px;border-radius:50%;display:inline-block}
.daychips .chip.on{background:var(--a-tonal) !important;color:var(--a-on-tonal);border-color:transparent}
.daychips .chip .ic{font-size:18px}
.audio{position:absolute;top:4px;right:4px;z-index:5;width:44px;height:44px;border-radius:50%;background:var(--a-surface);display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.audio .ic{font-size:22px}
.mstatus{position:absolute;left:12px;right:12px;bottom:12px;z-index:5;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--a-surface);border:1px solid var(--a-border);font-size:14px}
.mstatus .ic{font-size:18px;color:var(--a-primary)}
.mstatus span{flex:1}
.mstatus .r{color:var(--a-muted);font-size:20px}
.mfoot{padding:0 24px 22px;border-top:1px solid var(--a-border);flex:none;background:var(--a-bg)}
.mfoot .lr{padding:12px 0}
.mfoot .wbtn{margin-top:10px}

/* Talk to a Local */
.tl-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--a-border);flex:none}
.tl-bar .lang{flex:1;height:58px;border:1px solid var(--a-border);border-radius:20px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0 16px}
.tl-bar .lang small{font-size:11px;font-weight:500;color:var(--a-muted)}
.tl-bar .lang b{font-size:16px;font-weight:700;display:flex;align-items:center}
.tl-bar .lang b .ic{font-size:22px}
.tl-bar > .ic{color:var(--a-muted)}
.tl-list{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:12px;scrollbar-width:none}
.tl-list::-webkit-scrollbar{display:none}
.tlb{max-width:86%;border-radius:16px;padding:10px 14px 12px;animation:msgIn .4s cubic-bezier(.2,.8,.2,1) both}
.tlb.you{align-self:flex-start;background:rgba(63,167,230,.10);border:1px solid rgba(63,167,230,.35)}
.tlb.them{align-self:flex-end;background:rgba(0,137,123,.10);border:1px solid rgba(0,137,123,.35);text-align:right}
.tlb .hd{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700}
.tlb.you .hd{color:var(--a-primary)}
.tlb.them .hd{color:#26A69A;justify-content:flex-end}
.tlb .hd .ic{font-size:16px}
.tlb .tr{font-size:22px;font-weight:600;line-height:1.3;margin-top:4px}
.tlb .tr.live{font-style:italic;color:var(--a-muted)}
.tlb .or{font-size:14px;color:var(--a-muted);margin-top:4px}
.tl-listen{padding:10px 16px 26px;border-top:1px solid var(--a-border);flex:none}
.tl-chips{display:flex;justify-content:center;gap:10px}
.tl-chips button{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--a-border) !important;font-size:14px;font-weight:500}
.tl-chips button .ic{font-size:16px}
.tl-chips button.on{background:var(--a-primary) !important;color:var(--a-on-primary);border-color:transparent !important}
.tl-state{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.tl-state > span{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.pulse{width:10px;height:10px;border-radius:50%;background:var(--a-primary);box-shadow:0 0 0 0 rgba(63,167,230,.6);animation:tlpulse 1.4s infinite}
.pulse.off{background:var(--a-muted);animation:none}
@keyframes tlpulse{0%{box-shadow:0 0 0 0 rgba(63,167,230,.55)}70%{box-shadow:0 0 0 9px rgba(63,167,230,0)}100%{box-shadow:0 0 0 0 rgba(63,167,230,0)}}
.tl-state .fill{height:44px;padding:0 20px;border-radius:22px;background:var(--a-primary);color:var(--a-on-primary);display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600}
.tl-state .fill .ic{font-size:20px}

/* Ask WanderBuddy sheet (92%) */
.ask{position:absolute;left:0;right:0;bottom:0;height:92%;z-index:31;background:var(--a-surface);border-radius:12px 12px 0 0;display:flex;flex-direction:column;transform:translateY(105%);transition:transform .45s cubic-bezier(.2,.85,.2,1)}
.ask.on{transform:none}
.ask .grab{width:40px;height:4px;border-radius:2px;background:var(--a-border);margin:8px auto 0;flex:none}
.ask .hd{display:flex;justify-content:space-between;align-items:center;padding:14px 12px 4px 24px;flex:none}
.ask .hd b{font-size:18px;font-weight:600}
.ask .q2{display:flex;gap:8px;padding:6px 24px 4px;flex:none}
.ask .q2 .wbtn{min-height:40px;padding:8px 14px;font-size:14px !important;width:auto;flex:1}
.ask .qb{display:flex;gap:4px;padding:0 12px;flex:none}
.ask .qb span{display:inline-flex;align-items:center;gap:6px;color:var(--a-primary);font-size:14px;font-weight:600;padding:10px 12px}
.ask .qb .ic{font-size:18px}
.ask .body{flex:1;overflow-y:auto;padding:8px 20px 12px;display:flex;flex-direction:column;gap:12px;scrollbar-width:none}
.ask .body::-webkit-scrollbar{display:none}
.ask .empty{text-align:center;padding:14px 4px 0}
.ask .empty > .ic{font-size:44px;color:var(--a-primary)}
.ask .empty h5{margin:10px 0 6px;font-size:22px;font-weight:700}
.ask .empty p{margin:0 0 14px;font-size:14px;color:var(--a-muted);line-height:1.5}
.starter{display:block;width:100%;text-align:left;border:1px solid var(--a-border) !important;border-radius:20px;padding:12px 16px;font-size:14px;font-weight:500;color:var(--a-primary) !important;margin-top:8px}
.ub{align-self:flex-end;max-width:80%;background:var(--a-primary);color:var(--a-on-primary);border-radius:16px;padding:10px 14px;font-size:14px;line-height:1.45;animation:msgIn .35s both}
.ab{align-self:flex-start;max-width:86%;background:var(--a-subtle);border-radius:16px;padding:10px 14px;font-size:14px;line-height:1.5;animation:msgIn .35s both}
.typing3{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;border-radius:16px;background:var(--a-subtle)}
.typing3 i{width:7px;height:7px;border-radius:50%;background:var(--a-muted);animation:tdot 1s infinite}
.typing3 i:nth-child(2){animation-delay:.15s}.typing3 i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.plancard{border:1px solid var(--a-border);border-radius:16px;background:var(--a-surface);padding:14px;animation:msgIn .4s both}
.plancard .ph{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700}
.plancard .ph .ic{font-size:18px;color:var(--a-primary)}
.plancard .ph em{margin-left:auto;font-style:normal;font-size:12px;font-weight:400;color:var(--a-muted)}
.plancard .dl{margin:10px 0 2px;font-size:13px;font-weight:700;color:var(--a-primary)}
.prow{display:grid;grid-template-columns:42px 1fr auto;gap:8px;align-items:start;padding:7px 0}
.prow .t{font-size:12px;color:var(--a-muted);padding-top:2px}
.prow b{display:block;font-size:13.5px;font-weight:600;line-height:1.35}
.prow small{display:block;font-size:12px;color:var(--a-muted);margin-top:2px;line-height:1.35}
.prow .ic{font-size:22px;color:var(--a-primary)}
.prow .ic.done{color:var(--a-teal)}
.plancard .wbtn{margin-top:10px;min-height:40px;font-size:14px !important;color:var(--a-primary)}
.ask .comp{display:flex;align-items:center;gap:8px;padding:8px 12px 28px;border-top:1px solid var(--a-border);flex:none}
.ask .comp span{flex:1;height:44px;border-radius:12px;border:1px solid var(--a-border);display:flex;align-items:center;padding:0 14px;font-size:14px;color:var(--a-muted)}
.ask .comp b{width:44px;height:44px;border-radius:50%;background:var(--a-primary);color:var(--a-on-primary);display:grid;place-items:center}

/* Saved reels */
.reels{padding:4px 16px 40px}
.consent{display:flex;align-items:center;gap:14px;padding:12px 8px 16px}
.consent div{flex:1}
.consent b{display:block;font-size:15px;font-weight:600}
.consent small{display:block;font-size:13px;color:var(--a-muted);line-height:1.4;margin-top:2px}
.switch{width:52px;height:32px;border-radius:16px;border:2px solid var(--a-muted);position:relative;flex:none}
.switch::after{content:"";position:absolute;top:6px;left:6px;width:16px;height:16px;border-radius:50%;background:var(--a-muted)}
.search{display:flex;align-items:center;gap:12px;height:52px;border-radius:12px;background:var(--a-surface);border:1px solid var(--a-border);padding:0 14px;color:var(--a-muted);font-size:15px;margin-bottom:12px}
.rcard{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:12px;margin-bottom:10px;border-radius:16px;background:var(--a-subtle);border:1px solid var(--a-border)}
.rcard img{width:64px;height:64px;border-radius:8px;object-fit:cover}
.rcard b{display:block;font-size:15px;font-weight:600;line-height:1.3}
.rcard small{display:block;font-size:13px;color:var(--a-muted);margin-top:4px}
.rcard .ic{color:var(--a-muted)}
.rcard.fresh{animation:flashNew 2.6s ease both;border-color:rgba(53,201,188,.5)}

/* WhatsApp (dark) */
.wa{--w-head:#1F2C34;--w-bg:#0B141A;--w-in:#202C33;--w-out:#005C4B;--w-text:#E9EDEF;--w-meta:#8696A0;--w-link:#53BDEB;--w-green:#00A884;font-family:"Inter",ui-sans-serif,system-ui,sans-serif}
#L-wa{background:linear-gradient(var(--w-head) 54px,var(--w-bg) 54px)}
.wa .whead{display:flex;align-items:center;gap:10px;height:60px;padding:0 8px 0 4px;background:var(--w-head);flex:none;color:var(--w-text)}
.wa .whead .wav{width:38px;height:38px;flex:none}
.wa .whead .nm{flex:1;min-width:0}
.wa .whead .nm b{display:flex;align-items:center;gap:4px;font-size:16px;font-weight:600}
.wa .whead .nm b .ic{font-size:16px;color:var(--w-green)}
.wa .whead .nm small{display:block;font-size:12.5px;color:var(--w-meta)}
.wa .whead .ic{font-size:23px}
.wa .whead .acts{display:flex;gap:18px;padding-right:8px}
.wmsgs{flex:1;overflow-y:auto;background:var(--w-bg);padding:12px 12px 8px;display:flex;flex-direction:column;gap:4px;scrollbar-width:none;color:var(--w-text)}
.wmsgs::-webkit-scrollbar{display:none}
.wday{align-self:center;background:#182229;color:var(--w-meta);font-size:12px;padding:5px 12px;border-radius:8px;margin:4px 0 8px}
.wnote{align-self:center;max-width:88%;background:#182229;color:#FFD279;font-size:12px;line-height:1.4;padding:6px 12px;border-radius:8px;text-align:center;margin-bottom:6px}
.wm{max-width:84%;padding:6px 9px 18px;border-radius:8px;position:relative;font-size:14.5px;line-height:1.4;white-space:pre-line;overflow-wrap:anywhere;margin-top:4px}
.wm.in{align-self:flex-start;background:var(--w-in);border-top-left-radius:2px}
.wm.out{align-self:flex-end;background:var(--w-out);border-top-right-radius:2px}
.wm .t{position:absolute;right:8px;bottom:3px;font-size:11px;color:rgba(233,237,239,.6);display:flex;align-items:center;gap:2px}
.wm .t .ic{font-size:15px;color:var(--w-link)}
.wm a,.wm .lk{color:var(--w-link);text-decoration:underline}
.wm.anim{animation:msgIn .35s cubic-bezier(.2,.8,.2,1) both}
.lprev{display:grid;grid-template-columns:72px 1fr;gap:10px;align-items:center;background:rgba(0,0,0,.18);border-radius:6px;overflow:hidden;margin:-2px -5px 6px;white-space:normal}
.lprev img{width:72px;height:72px;object-fit:cover}
.lprev b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.lprev small{display:block;font-size:12px;color:rgba(233,237,239,.65);margin-top:2px}
.wbtns{align-self:flex-start;width:84%;display:flex;flex-direction:column;gap:3px;margin-top:2px}
.wbtns span,.wbtns button{display:flex;align-items:center;justify-content:center;gap:6px;height:40px;border-radius:8px;background:var(--w-in) !important;color:var(--w-link) !important;font-size:14.5px;font-weight:500}
.wbtns .ic{font-size:18px}
.wbtns.used span,.wbtns.used button{opacity:.55}
.wtyping{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;border-radius:8px;background:var(--w-in);margin-top:4px}
.wtyping i{width:7px;height:7px;border-radius:50%;background:var(--w-meta);animation:tdot 1s infinite}
.wtyping i:nth-child(2){animation-delay:.15s}.wtyping i:nth-child(3){animation-delay:.3s}
.wcomp{display:flex;align-items:center;gap:6px;padding:6px 8px 28px;background:var(--w-bg);flex:none}
.wcomp .wfield{flex:1;min-width:0;height:46px;border-radius:23px;background:var(--w-in);display:flex;align-items:center;gap:10px;padding:0 14px;color:var(--w-meta);font-size:15px}
.wcomp .wfield span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--w-text)}
.wcomp .wfield span.ph{color:var(--w-meta)}
.wcomp .wfield .ic{font-size:22px}
.wcomp .wsend{width:46px;height:46px;border-radius:50%;background:var(--w-green) !important;color:#0B141A;display:grid;place-items:center;flex:none}
.wcomp .wsend .ic{font-size:22px}
.wdraft{display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:center;margin:0 8px 6px;padding:8px;border-radius:10px;background:var(--w-in);border-left:3px solid var(--w-green);color:var(--w-text);flex:none}
.wdraft img{width:56px;height:56px;border-radius:6px;object-fit:cover}
.wdraft b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.wdraft small{display:block;font-size:12px;color:var(--w-meta);margin-top:2px}

/* Guided hint: one pulsing ring on the next thing to tap. */
.hint{position:relative;z-index:6}
.hint::after{content:"";position:absolute;inset:-5px;border-radius:inherit;border:2px solid var(--amber);box-shadow:0 0 0 0 rgba(53,201,188,.5);animation:hintp 1.6s ease-out infinite;pointer-events:none}
@keyframes hintp{0%{box-shadow:0 0 0 0 rgba(53,201,188,.45);opacity:1}100%{box-shadow:0 0 0 12px rgba(53,201,188,0);opacity:.85}}
/* Absolutely placed controls keep their own position and stacking when hinted. */
.minifab.hint,.efab.hint,.fab.hint{position:absolute}
.scrim.hint{position:absolute;z-index:30}
.tap{position:absolute;z-index:70;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(53,201,188,.35);border:2px solid rgba(53,201,188,.9);pointer-events:none;animation:tapr .6s ease-out forwards}
@keyframes tapr{from{transform:scale(.4);opacity:1}to{transform:scale(1.3);opacity:0}}

/* ---------- Deck (?deck=1): the console alone, filling the investor deck's pane ---------- */
.deck body{background:#0B141F;overflow:hidden}
.deck .top,.deck .demo-head{display:none}
.deck main.wrap{max-width:none;margin:0;padding:0}
.deck .console{height:100vh;height:100dvh;margin:0;border:0;border-radius:0;grid-template-rows:minmax(0,1fr)}
.deck .c-nav,.deck .c-detail{min-height:0;overflow-y:auto;scrollbar-width:thin}
.deck .c-stage{min-height:0;padding:14px 12px}
@media (min-width:821px){.deck .c-stage .device{--s:var(--fit,.7)}}
@media (max-width:1180px){
  .deck .console{grid-template-rows:auto minmax(0,1fr)}
  /* every chapter in view: wrap into compact rows instead of a strip cut off at the edge */
  .deck .c-nav{flex-wrap:wrap;overflow:visible;gap:4px;padding:10px 12px}
  .deck .c-nav button{padding:6px 11px;font-size:13px;gap:8px}
  .deck .c-nav button .ic{font-size:16px}
  .deck .c-nav button svg.ic{width:16px;height:16px}
}
@media (max-width:820px){
  .deck body{overflow:auto}
  .deck .console{height:auto;grid-template-rows:none}
}

/* ---------- Embed (?embed=1): the phone screen only, sized by the iframe ---------- */
.embed body{background:#0B141F;overflow:hidden}
.embed body > *:not(#embedRoot){display:none !important}
#embedRoot{display:none}
.embed #embedRoot{display:block;position:fixed;inset:0;overflow:hidden}
.embed #embedRoot .device{position:absolute;top:0;left:0}
.embed #embedRoot .device .frame{border-radius:0;box-shadow:none}
.embed #embedRoot .island,.embed #embedRoot .homebar{display:none}
.embed .scroll,.embed .msgs,.embed .wmsgs,.embed .tl-list,.embed .ask .body,.embed .sheet .list{overflow:hidden}

@media (prefers-reduced-motion: reduce){
  .swap,.tabp.on,.msg.in,.wm.anim,.tlb,.ub,.ab,.plancard,.stop.new,.prop.fresh,.rcard.fresh{animation:none !important}
  .hint::after,.pulse,.typing3 i,.wtyping i{animation:none}
  .layer,.sheet,.ask,.viewer{transition:none}
}

/* Icon glyphs: codepoint subset of Material Symbols Outlined (media/icons.woff2,
   built by website/demo-src/subset_icons.py). */
.i-arrow_back::before{content:"\e5c4"}
.i-more_vert::before{content:"\e5d4"}
.i-forum::before{content:"\e0bf"}
.i-notifications::before{content:"\e7f4"}
.i-luggage::before{content:"\f235"}
.i-public::before{content:"\e80b"}
.i-add::before{content:"\e145"}
.i-check_circle::before{content:"\e86c"}
.i-error::before{content:"\e000"}
.i-schedule::before{content:"\e192"}
.i-cancel::before{content:"\e5c9"}
.i-chevron_right::before{content:"\e409"}
.i-expand_more::before{content:"\e5cf"}
.i-flight::before{content:"\e539"}
.i-arrow_forward::before{content:"\e5c8"}
.i-place::before{content:"\e0c8"}
.i-directions::before{content:"\e52e"}
.i-person::before{content:"\e7fd"}
.i-how_to_vote::before{content:"\e175"}
.i-event::before{content:"\e24f"}
.i-lightbulb::before{content:"\e0f0"}
.i-radar::before{content:"\f04e"}
.i-map::before{content:"\e55b"}
.i-groups::before{content:"\f233"}
.i-mic::before{content:"\e029"}
.i-auto_awesome::before{content:"\e65f"}
.i-translate::before{content:"\e8e2"}
.i-record_voice_over::before{content:"\e91f"}
.i-folder::before{content:"\e2c7"}
.i-sos::before{content:"\ebf7"}
.i-close::before{content:"\e14c"}
.i-tune::before{content:"\e429"}
.i-delete::before{content:"\e872"}
.i-account_balance_wallet::before{content:"\e850"}
.i-restaurant::before{content:"\e56c"}
.i-directions_car::before{content:"\e531"}
.i-hotel::before{content:"\e53a"}
.i-local_activity::before{content:"\e53f"}
.i-shopping_bag::before{content:"\f1cc"}
.i-savings::before{content:"\e2eb"}
.i-chat::before{content:"\e0b7"}
.i-upload_file::before{content:"\e9fc"}
.i-ios_share::before{content:"\e6b8"}
.i-person_add::before{content:"\e7fe"}
.i-near_me::before{content:"\e569"}
.i-hourglass_top::before{content:"\ea5b"}
.i-chat_bubble::before{content:"\e0ca"}
.i-headphones::before{content:"\e310"}
.i-refresh::before{content:"\e5d5"}
.i-volume_up::before{content:"\e050"}
.i-swap_horiz::before{content:"\e8d4"}
.i-arrow_drop_down::before{content:"\e5c5"}
.i-pause::before{content:"\e034"}
.i-history::before{content:"\e28e"}
.i-add_comment::before{content:"\e266"}
.i-send::before{content:"\e163"}
.i-arrow_upward::before{content:"\e5d8"}
.i-add_circle::before{content:"\e147"}
.i-playlist_add::before{content:"\e03b"}
.i-route::before{content:"\eacd"}
.i-water_drop::before{content:"\e798"}
.i-partly_cloudy_day::before{content:"\f172"}
.i-sunny::before{content:"\e81a"}
.i-attach_file::before{content:"\e226"}
.i-bolt::before{content:"\ea0b"}
.i-description::before{content:"\e873"}
.i-qr_code_scanner::before{content:"\f206"}
.i-vpn_key::before{content:"\e0da"}
.i-photo_library::before{content:"\e413"}
.i-check::before{content:"\e5ca"}
.i-receipt_long::before{content:"\ef6e"}
.i-fact_check::before{content:"\f0c5"}
.i-event_note::before{content:"\e616"}
.i-notifications_off::before{content:"\e7f6"}
.i-signal_cellular_alt::before{content:"\e202"}
.i-wifi::before{content:"\e63e"}
.i-battery_full::before{content:"\e1a4"}
.i-lock::before{content:"\e88d"}
.i-train::before{content:"\e570"}
.i-sailing::before{content:"\e502"}
.i-photo_camera::before{content:"\e3b0"}
.i-stop_circle::before{content:"\ef71"}
.i-movie::before{content:"\e02c"}
.i-smart_display::before{content:"\f06a"}
.i-add_link::before{content:"\e178"}
.i-search::before{content:"\e8b6"}
.i-videocam::before{content:"\e04b"}
.i-call::before{content:"\e0b0"}
.i-verified::before{content:"\e031"}
.i-done_all::before{content:"\e877"}
.i-mood::before{content:"\e24e"}
.i-add_photo_alternate::before{content:"\e43e"}
.i-open_in_new::before{content:"\e895"}
.i-touch_app::before{content:"\e913"}
.i-reply::before{content:"\e15e"}
.i-link::before{content:"\e157"}
.i-image::before{content:"\e251"}
.i-movie_filter::before{content:"\e43a"}
.i-sentiment_satisfied::before{content:"\e0ed"}