/* ─────────────────────────────────────────────────────────────────
   demo.css — styles for the live "Try CARTaja" emulator hero.
   Originally inlined in index.html; extracted so landing.html can
   reuse the same demo block.

   Notes on conflicts with home.css:
   - body / html / a / img / button resets are intentionally OMITTED
     so home.css continues to govern the page chrome around the demo.
   - .nav, .nav-logo, .nav-right, .lang-switch, .lang-toggle,
     .lang-menu, .lb are also OMITTED — pages that use the demo
     keep their own nav and language switcher.
   - .hero, .hero-left, .hero-right, .hero-headline, .hero-sub,
     .eyebrow apply to the demo's new hero only (the previous .hero
     element is replaced wherever this file is used).
   ───────────────────────────────────────────────────────────────── */

/* ── Tokens ── */
:root {
  --bg-main: #0a8a8e;
  --bg-deep: #065e61;
  --bg-darkest: #043a3c;
  --heading-color: #441639;
  --text-primary: #2A3C42;
  --ivory: #F5F1E5;
  --ivory-warm: #EDE8D8;
  --crimson: #441639;
  --crimson-dark: #2D0E26;
  --terracotta: #D76F4B;
  --whatsapp: #25D366;
  --white: #FFFFFF;
  --border-glass: rgba(255,255,255,0.13);
  --glass-bg: rgba(255,255,255,0.07);
}

/* ── Background ──
   Absolute (not fixed) so when used inside a host like landing.html the
   image is bounded to its parent (.demo-stage) and doesn't bleed across
   the page's other sections. On index.html the parent is the body's
   initial containing block, so absolute behaves like fixed visually. */
.page-bg{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;
}
.page-bg::before{
  content:'';position:absolute;inset:0;
  background:url('../assets/cothon-shopping-cart-graphic.jpg') 70% center / cover no-repeat;
}
.page-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(
    90deg,
    rgba(4,58,60,0.93) 0%,
    rgba(10,138,142,0.85) 30%,
    rgba(10,138,142,0.55) 55%,
    rgba(4,58,60,0.7) 100%
  );
}

/* ── Buttons ── */
/* Primary CTA — terracotta → crimson gradient ("sunset"), with an arrow that
   slides forward on hover. Bigger padding + drop shadow so it anchors the
   eye as the conversion target after the visitor reads the headline. */
.btn-primary-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:14px;
  background:linear-gradient(135deg, var(--terracotta,#D76F4B) 0%, var(--crimson,#441639) 100%);
  color:#fff;
  font-family:inherit;
  font-size:15px;font-weight:700;letter-spacing:.01em;
  cursor:pointer;
  border:none;
  box-shadow:0 6px 20px rgba(215,111,75,.32);
  transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, filter .2s ease;
}
.btn-primary-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(215,111,75,.45);
  filter:brightness(1.05);
}
.btn-primary-cta:active{transform:translateY(0);box-shadow:0 4px 14px rgba(215,111,75,.28)}
.btn-primary-cta .cta-arrow{
  font-size:20px;line-height:1;
  font-variation-settings:'FILL' 0,'wght' 500;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.btn-primary-cta:hover .cta-arrow{transform:translateX(4px)}
/* RTL: flip the arrow so it still points "forward" in the reading direction. */
[dir="rtl"] .btn-primary-cta .cta-arrow{transform:scaleX(-1)}
[dir="rtl"] .btn-primary-cta:hover .cta-arrow{transform:scaleX(-1) translateX(4px)}
.btn-ghost{
  padding:10px 18px;border-radius:10px;
  background:transparent;color:rgba(255,255,255,.85);
  font-size:13px;font-weight:600;
  border:1px solid rgba(255,255,255,.18);
  cursor:pointer;transition:all .2s;
}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:var(--white)}

/* ── Demo Hero (Two-Zone) ── */
.demo-stage{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  min-height:100vh;min-height:100dvh;
}
.demo-stage .hero{
  flex:1;display:grid;
  /* Narrower left column (capped at 560px instead of growing to fill all
     remaining space) brings the marketing copy closer to the phone for a
     more "stage-y" composition. justify-content:center anchors the pair
     in the middle of the hero so the row breathes on both sides. */
  grid-template-columns: minmax(0,560px) minmax(0,420px);
  justify-content:center;
  gap:28px;
  padding:8px 60px 40px;
  align-items:center;
  max-width:1280px;width:100%;margin:0 auto;
}
.demo-stage .hero-left{display:flex;flex-direction:column;gap:9px;min-width:0}
/* The legacy use-case-picker / uc-description / uc-meta divs are kept in
   the markup but rendered empty in stores-mode. Hide them when empty so
   they don't contribute phantom flex gaps and push the perks off-center. */
.demo-stage .hero-left .use-case-picker:empty,
.demo-stage .hero-left .uc-description:empty,
.demo-stage .hero-left .uc-meta:empty{display:none}
.demo-stage .eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#fefefe;
}
.demo-stage .hero-headline{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(28px,3.6vw,46px);font-weight:400;
  line-height:1.05;letter-spacing:-.02em;
  color:#fefefe;
  /* Reset the heading's default block margin so the perks block's
     margin-top is the only spacing below the headline (keeps the top
     and bottom gaps around the perks perfectly symmetric). */
  margin:0;
}
.demo-stage .hero-headline em{font-style:italic;color:#fefefe;font-size:.55em;display:block;margin-top:14px;line-height:1.4}
.demo-stage .hero-secondary{
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:clamp(18px,1.7vw,24px);
  font-weight:500;line-height:1.4;
  color:#fefefe;
  max-width:620px;
  margin:30px 0 0;
}
.demo-stage .hero-tertiary{
  font-size:19px;line-height:1.55;
  color:rgba(255,255,255,.72);
  max-width:560px;
  margin:22px 0 0;
}
.demo-stage .hero-tertiary-arrow{
  font-size:20px;margin-left:8px;
  vertical-align:-3px;opacity:.85;
}
[dir=rtl] .demo-stage .hero-tertiary-arrow{transform:rotate(180deg);margin-left:0;margin-right:8px}
/* In RTL (Arabic), keep the hero's two-column layout PHYSICAL:
   text-left, emulator-right. We do this three ways for belt-and-suspenders:
   1) force the .hero grid container back to direction:ltr so column flow
      isn't reversed by the inherited rtl from <html dir="rtl">,
   2) pin each child to an explicit physical grid column,
   3) restore direction:rtl on the text column only so Arabic still reads
      right-to-left INSIDE it — the emulator column stays LTR so its
      internal rendering isn't disturbed. */
[dir=rtl] .demo-stage .hero{direction:ltr!important;column-gap:56px}
[dir=rtl] .demo-stage .hero-left{direction:rtl;grid-column:1/2}
[dir=rtl] .demo-stage .hero-right{grid-column:2/3}
@media (max-width:1023px){
  .demo-stage .hero-tertiary-arrow{display:none}
}
.demo-stage .hero-sub{
  font-size:16px;line-height:1.6;
  color:rgba(255,255,255,.7);
  max-width:520px;
}

/* ── Use-Case Picker ── */
.use-case-picker{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:6px;
}
.uc-pill{
  padding:9px 16px;border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.75);
  font-size:13px;font-weight:600;letter-spacing:.01em;
  cursor:pointer;transition:all .2s;
  white-space:nowrap;
}
.uc-pill:hover{background:rgba(255,255,255,.12);color:var(--white);border-color:rgba(255,255,255,.22)}
.uc-pill.active{
  background:var(--ivory);color:var(--heading-color);
  border-color:var(--ivory);
}
.uc-description{
  font-size:14px;line-height:1.55;
  color:rgba(255,255,255,.6);
  margin-top:4px;
  /* Legacy use-case picker placeholder height — zeroed because the picker
     is empty in the current stores-mode layout, and the dead space was
     pushing the perks away from the headline. */
  min-height:0;
}
.uc-meta{
  font-size:12px;color:rgba(255,255,255,.4);
  display:flex;align-items:center;gap:8px;
  letter-spacing:.02em;
}
.uc-meta i,
.uc-meta .uc-meta-icon{font-size:14px;color:var(--whatsapp);opacity:.85;font-variation-settings:'FILL' 1}

/* ── Hero Actions ── */
.hero-actions{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:1.5em;
}

/* ── Perks ──
   Stacked feature list — one beat per line, sitting between the headline
   and the CTA. Each row is larger and ivory at high contrast so they read
   as real selling points instead of a footnote. The block keeps its
   natural height (no flex:1) so the CTA's position is unchanged. */
.hero-perks{
  display:flex;flex-direction:column;gap:14px;
  /* Symmetric with .hero-actions' margin-top, plus a 15px nudge to absorb
     the H1's italic <em> bottom-leading (which flex layout doesn't
     account for) — places the perks exactly halfway between the headline
     and the CTA. */
  margin-top:calc(1.5em + 15px);
}
.perk{
  display:flex;align-items:center;gap:12px;
  font-size:16px;font-weight:600;letter-spacing:.005em;
  color:#fefefe;
  line-height:1.25;
}
.perk-icon{
  font-size:24px;line-height:1;
  color:var(--terracotta,#D76F4B);
  font-variation-settings:'FILL' 1,'wght' 500;
  flex-shrink:0;
  /* Soft glow so the terracotta icon reads against the dark teal page. */
  filter:drop-shadow(0 2px 6px rgba(215,111,75,.35));
}

/* ── Right Zone: Emulator + 3D phone ── */
.demo-stage .hero-right{display:flex;justify-content:center;align-items:center;min-width:0;perspective:1600px}

/* Mobile-only CTA that opens the emulator as a fullscreen overlay. Hidden on
   desktop — the 3D phone frame is shown directly there. */
.emulator-open-btn{display:none}

.iphone-frame{
  zoom: 0.95;
  position:relative;
  width:390px;height:780px;
  background:#0a0a0a;
  border-radius:55px;
  padding:12px;
  box-sizing:border-box;
  box-shadow:
    0 0 0 2px #222,
    0 30px 60px -15px rgba(0,0,0,.6),
    0 0 120px rgba(30,200,180,.1);
  /* Zoom-in entrance: scales from 10% to 100% while spinning a full turn
     about its vertical axis. Runs once after the page settles. */
  animation:phoneZoomIn 1.4s cubic-bezier(.16,1,.3,1) .5s 1 both;
  transform-style:preserve-3d;
}
@keyframes phoneZoomIn{
  0%   { transform: scale(0.1) rotateY(-360deg); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: scale(1) rotateY(0deg); opacity: 1; }
}
.iphone-frame::before{
  content:"";position:absolute;
  top:22px;left:50%;transform:translateX(-50%);
  width:120px;height:34px;background:#000;border-radius:20px;z-index:10;
}
/* True 3D phone faces — front face = .iphone-frame body + .iphone-screen,
   the four side faces and back form the rest of the slab so the spin
   reads as a real solid box. Hidden after the spin completes (0.5s delay
   + 1.4s duration = 1.9s) — at front-facing rest, the faces are meant to
   project edge-on but Chrome leaves them at sub-pixel sizes when [dir=rtl]
   forces a 3D-context re-evaluation, which paints a visible flat slab
   around the bezel. Hiding them post-animation makes EN/AR identical. */
.face{
  position:absolute;
  pointer-events:none;
  background:linear-gradient(135deg,#1a1a1a,#050505 50%,#0d0d0d);
  animation:hidePhoneFace 0s linear 1.9s 1 forwards;
}
@keyframes hidePhoneFace{ to { visibility: hidden; } }
.face-back{
  inset:0;
  border-radius:55px;
  transform:translateZ(-20px);
  box-shadow:inset 0 0 50px rgba(0,0,0,.6);
}
.face-left{
  top:0;left:0;width:20px;height:100%;
  transform-origin:left center;
  transform:rotateY(90deg);
}
.face-right{
  top:0;right:0;width:20px;height:100%;
  transform-origin:right center;
  transform:rotateY(-90deg);
}
.face-top{
  top:0;left:0;width:100%;height:20px;
  transform-origin:center top;
  transform:rotateX(-90deg);
}
.face-bottom{
  bottom:0;left:0;width:100%;height:20px;
  transform-origin:center bottom;
  transform:rotateX(90deg);
}
.iphone-screen{
  width:100%;height:100%;
  border-radius:43px;overflow:hidden;
  background:#fff;position:relative;
  /* Push the screen ~1px forward in 3D space so it's unambiguously in front
     of the back face, even if the browser's 3D sorting is loose. */
  transform:translateZ(1px);
}
.iphone-status-bar{
  position:absolute;top:0;left:0;right:0;
  height:50px;display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;
  font-size:15px;font-weight:600;color:#111;
  z-index:9;pointer-events:none;
}
.iphone-status-bar .ios-icons{display:flex;align-items:center;gap:6px;font-size:13px}
.iphone-status-bar .ios-icons i,
.iphone-status-bar .ios-icons .mi{
  opacity:.85;
  font-size:18px;line-height:1;
}
.iphone-status-bar .ios-battery{
  width:24px;height:11px;
  border:1px solid rgba(0,0,0,.6);border-radius:3px;
  position:relative;padding:1px;box-sizing:border-box;
}
.iphone-status-bar .ios-battery::after{
  content:"";position:absolute;right:-3px;top:3px;
  width:2px;height:3px;background:rgba(0,0,0,.6);border-radius:0 1px 1px 0;
}
.iphone-status-bar .ios-battery-fill{
  display:block;width:100%;height:100%;
  background:rgb(255,226,59);border-radius:1px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}

#emulator-mount, #emulator-mount .nui-wa-container{
  height:100%;max-width:none;
}
#emulator-mount .nui-wa-container{border-radius:0}
#emulator-mount .nui-wa-header{padding-top:58px}

/* ── Phone Side Tabs ──
   Two stacked pills attached to the right edge of the iPhone frame (Help and
   Clear chat). The .phone-with-tabs wrapper is sized to the iphone-frame's
   layout box (display:inline-block) so the absolute-positioned .phone-side-tabs
   anchor to the phone's rendered right edge — independent of hero-right's flex
   centering and zoom:0.9. */
.phone-with-tabs{position:relative;display:inline-block}

/* Reset text-align inside the emulator surface. home.css applies
   `text-align: center` to `.hero` on mobile (≤768px) for the legacy
   hero's centered copy, and that centering inherits all the way into
   the WhatsApp chat bubbles. Force `start` on the container so
   descendants without an explicit text-align inherit start (left in
   LTR, right in RTL) instead of center. Widget elements that DO have
   explicit text-align (times, tabs, empty-state) keep their values. */
#emulator-mount {
  text-align: start;
}

/* Mobile-overlay chrome (close-bar + subtitle) — kept globally hidden so
   they don't render inside the desktop 3D phone, which sits in the same
   .iphone-frame container. Mobile media query below flips them visible
   while body.is-emulator-open is set. */
.emulator-close-bar,
.emulator-subtitle{display:none}


/* "WhatsApp emulator" label sitting just above the iPhone, centered with
   it. Same anchor pattern as the dock label — bottom:100%+gap so it
   tracks the phone's top regardless of the entrance animation's transform. */
.emulator-title{
  position:absolute;
  bottom:calc(100% + 10px);
  left:0;right:0;
  text-align:center;
  font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  line-height:1.2;
  color:rgba(255,255,255,.72);
  text-shadow:0 1px 2px rgba(0,0,0,.4);
  pointer-events:none;
  white-space:nowrap;
}

.phone-side-tabs{
  position:absolute;
  /* Lower-third of the phone, on the left side — sits near the chat input.
     6px gap from the phone's left bezel; uses right:100%+gap so the gap
     stays fixed regardless of the buttons' size. */
  top:66%;right:calc(100% + 6px);
  display:flex;flex-direction:column;gap:10px;
  z-index:5;
  /* Fade in after the iphone-frame's zoomIn entrance settles
     (0.5s delay + 1.4s duration = 1.9s). */
  opacity:0;
  animation:tabsFadeIn .5s ease 1.9s 1 forwards;
}
@keyframes tabsFadeIn{ to{ opacity:1 } }

/* Round icon button — icon-only, no text label. Floats next to the phone
   as a standalone control. */
.phone-tab{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ivory,#fdf7eb);color:var(--heading-color,#043a3c);
  border:none;
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.phone-tab:hover{
  transform:translateX(-3px) scale(1.06);
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.34);
}
.phone-tab:active{transform:translateX(-1px) scale(1.02)}
.phone-tab .phone-tab-icon{
  font-size:22px;color:var(--whatsapp,#25D366);
  font-variation-settings:'FILL' 1,'wght' 500;
  line-height:1;
}
/* Text labels are no longer rendered — round buttons are icon-only. */
.phone-tab-label{display:none}

/* RTL: round buttons flip to the right side of the phone. */
[dir="rtl"] .phone-side-tabs{right:auto;left:calc(100% + 6px)}
[dir="rtl"] .phone-tab:hover{transform:translateX(3px) scale(1.06)}
[dir="rtl"] .phone-tab:active{transform:translateX(1px) scale(1.02)}

/* Inline reset button is replaced by the side tab on desktop. */
@media (min-width: 641px){
  #start-over-btn{display:none}
}

/* Empty state when emulator can't connect */
.emulator-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;padding:60px 32px;text-align:center;
  background:linear-gradient(180deg,#e5ddd5 0%,#d4c8bc 100%);
  color:#2c2c2c;
}
.emulator-empty i,
.emulator-empty .emulator-empty-icon{font-size:48px;color:var(--whatsapp);margin-bottom:16px;opacity:.7}
.emulator-empty h4{font-size:17px;font-weight:600;margin-bottom:8px}
.emulator-empty p{font-size:13px;color:#666;line-height:1.5;max-width:240px}

/* ── Floating CTA Banner ── */
.float-cta{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,200%);
  display:flex;align-items:center;gap:14px;
  padding:14px 22px;
  background:rgba(4,58,60,.95);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.4);
  z-index:40;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.float-cta.show{transform:translate(-50%,0)}
.float-cta-text{font-size:14px;color:var(--ivory);font-weight:500}
.float-cta button{
  padding:8px 18px;border-radius:10px;
  background:var(--ivory);color:var(--heading-color);
  font-size:13px;font-weight:700;
  cursor:pointer;transition:all .2s;
  border:none;
}
.float-cta button:hover{background:var(--white)}
.float-cta-close{
  background:transparent!important;color:rgba(255,255,255,.5)!important;
  padding:4px 8px!important;font-size:18px!important;line-height:1!important;
}
.float-cta-close:hover{color:var(--white)!important}

/* ── Modal Overrides (cartaja look on top of Bootstrap) ── */
.modal-content{
  background:rgba(4,58,60,.95)!important;
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:24px!important;
  color:var(--ivory);
  overflow:hidden;
}
.modal-header{
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  padding:22px 28px 18px!important;
}
.modal-title{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:400!important;
  font-size:22px!important;color:var(--white)!important;
  flex:1;text-align:center;
  margin-left:32px;
}
.modal-body{padding:24px 28px!important}
.modal-footer{display:none!important}
.btn-close{
  filter:invert(1) brightness(1.5)!important;
  opacity:.6!important;transition:opacity .2s;
}
.btn-close:hover{opacity:1!important}

/* ── Waitlist Form (inside modal) ── */
.wl-form{display:flex;flex-direction:column;gap:12px}
.wl-input{
  width:100%;padding:14px 18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  /* 16px minimum — iOS Safari auto-zooms (and never zooms back) when
     focusing an input/textarea below 16px, which leaves the whole page
     cropped on the right and bottom of the now-too-large viewport. */
  color:var(--white);font-size:16px;font-family:inherit;
  transition:all .25s;outline:none;
}
.wl-input::placeholder{color:rgba(255,255,255,.35)}
.wl-textarea{resize:vertical;min-height:96px;line-height:1.45}
.wl-input:focus{
  border-color:rgba(255,255,255,.35);
  background:rgba(255,255,255,.12);
  box-shadow:0 0 0 3px rgba(255,255,255,.06);
}
[dir=rtl] .wl-input{text-align:right}

.wl-row{display:flex;gap:12px}
.wl-row .wl-input{flex:1;min-width:0}

.wl-phone-wrap{position:relative;flex:1;min-width:0}
.wl-phone-wrap .wl-input{padding-right:36px}
[dir=rtl] .wl-phone-wrap .wl-input{padding-right:18px;padding-left:36px}
.wl-phone-info{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:rgba(255,255,255,.4);font-size:16px;cursor:pointer;line-height:1;
}
[dir=rtl] .wl-phone-info{right:auto;left:14px}
.wl-phone-tooltip{
  display:none;position:absolute;bottom:calc(100% + 10px);right:0;
  width:240px;padding:10px 14px;
  background:var(--bg-darkest);
  border:1px solid rgba(255,255,255,.15);border-radius:10px;
  color:rgba(255,255,255,.8);font-size:13px;line-height:1.5;
  box-shadow:0 8px 24px rgba(0,0,0,.3);z-index:50;
}
[dir=rtl] .wl-phone-tooltip{right:auto;left:0;text-align:right}
.wl-phone-info:hover .wl-phone-tooltip,
.wl-phone-info:focus .wl-phone-tooltip{display:block}

.wl-combo{position:relative;width:100%}
.wl-combo-input{padding-right:44px!important}
[dir=rtl] .wl-combo-input{padding-right:18px!important;padding-left:44px!important}
.wl-combo-arrow{
  position:absolute;right:18px;top:50%;transform:translateY(-50%);
  pointer-events:none;transition:transform .2s;
}
[dir=rtl] .wl-combo-arrow{right:auto;left:18px}
.wl-combo.open .wl-combo-arrow{transform:translateY(-50%) rotate(180deg)}
.wl-combo-list{
  display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);
  max-height:220px;overflow-y:auto;
  background:var(--bg-darkest);
  border:1px solid rgba(255,255,255,.15);border-radius:12px;
  list-style:none;margin:0;padding:6px 0;z-index:100;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;
}
.wl-combo-list::-webkit-scrollbar{width:6px}
.wl-combo-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px}
.wl-combo.open .wl-combo-list{display:block}
.wl-combo-list li{padding:10px 20px;color:var(--white);font-size:14px;cursor:pointer;transition:background .15s}
.wl-combo-list li:hover,.wl-combo-list li.highlighted{background:rgba(255,255,255,.1)}
.wl-combo-list li.no-match{color:rgba(255,255,255,.35);cursor:default}

.wl-btn{
  width:100%;padding:14px 30px;
  background:var(--ivory);color:var(--heading-color);
  border:none;border-radius:12px;
  font-size:15px;font-weight:700;font-family:inherit;
  cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);
  margin-top:6px;letter-spacing:.01em;
}
.wl-btn:hover{background:var(--white);transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.2)}
.wl-btn:active{transform:translateY(0)}
.wl-btn:disabled{opacity:.5;transform:none;cursor:wait}

.wl-error{
  display:none;
  background:rgba(215,111,75,.15);
  border:1px solid rgba(215,111,75,.3);
  border-radius:10px;padding:10px 14px;
  font-size:13px;color:var(--terracotta);text-align:center;
}
.wl-error.show{display:block}
.wl-note{
  font-size:12px;color:rgba(255,255,255,.4);margin-top:6px;text-align:center;
}
.wl-note a{color:rgba(255,255,255,.6);text-decoration:underline}

.wl-success{display:none;text-align:center;padding:20px 0}
.wl-success.show{display:block}
.wl-form.hide{display:none}
.wl-check{
  width:64px;height:64px;border-radius:50%;
  background:rgba(37,211,102,.15);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;
}
.wl-check svg{width:32px;height:32px;color:var(--whatsapp)}
.wl-success h3{font-family:'Bricolage Grotesque',sans-serif;font-size:24px;font-weight:400;color:var(--ivory);margin-bottom:10px}
.wl-success p{font-size:14px;color:rgba(255,255,255,.6);max-width:340px;margin:0 auto;line-height:1.6}

/* ── Responsive ── */
@media (max-width: 1023px){
  .demo-stage .hero{
    grid-template-columns:1fr;
    gap:32px;padding:8px 32px 40px;
  }
  .iphone-frame{width:340px;height:680px}
}
@media (max-width: 640px){
  .demo-stage .hero{padding:24px 0;gap:20px}
  .demo-stage .hero-left{padding:0 20px}
  /* Push the hero text below the cothon image on first paint. The image's
     ::before is 120vw wide with aspect-ratio 2750/1536, so it occupies ~67vw
     of vertical space from the top of the demo-stage. The (i) info button
     (.about-info) stays in flow at the top of hero-left — only the headline
     and everything after it get pushed down. */
  .demo-stage .hero-headline{margin-top:25vw}
  .use-case-picker{justify-content:center}
  /* Show the cothon graphic on mobile too — full-bleed, centered (desktop
     pushes it to 70% because of the two-column layout). Override the desktop
     `cover` sizing: we want the entire image width visible (no cropping), so
     fix width to 100% and let the height scale. The image still spans the
     whole page-bg, but the gradient overlay below makes it only read behind
     the eyebrow + headline; everything from the use-case-picker down sits on
     a solid teal field. */
  .page-bg::before{
    /* Shrink the pseudo-element so its box matches the rendered image's
       aspect ratio (2750×1536). Without this, the box spans the full
       demo-stage height and the mask gradient transitions far below where
       the image actually ends. */
    inset:0 auto auto 0;
    width:100%;
    aspect-ratio:2750 / 1536;
    background-size:115% 100%;
    background-position:0 0;
    /* Fade the bottom of the image into transparency so it blends into the
       gradient below instead of ending on a hard horizontal edge. */
    -webkit-mask-image:linear-gradient(to bottom, #000 60%, transparent 100%);
            mask-image:linear-gradient(to bottom, #000 60%, transparent 100%);
  }
  .page-bg::after{
    background:linear-gradient(180deg,
      rgba(4,58,60,0.10) 0,
      rgba(4,58,60,0.20) 40vw,
      rgba(4,58,60,0.85) 62vw,
      var(--bg-darkest, #043a3c) 70vw,
      var(--bg-deep, #065e61) 100%);
  }

  /* On mobile the inline iPhone frame is replaced by a CTA button that lives
     in .hero-left (right under the use-case description). hero-right keeps the
     iPhone frame element only for the fullscreen overlay state, and its
     `perspective` is cleared because any ancestor with perspective/transform
     becomes the containing block for fixed-positioned descendants — that would
     scope the overlay to this zero-height column instead of the viewport. */
  .demo-stage .hero-right{perspective:none}
  .emulator-open-btn{
    display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;padding:18px 24px;
    /* Breathing room from the hero headline above — flex gap (9px) alone
       reads too cramped on mobile against a tall headline. */
    margin-top:24px;
    background:var(--whatsapp);color:#fff;
    font-family:inherit;font-size:16px;font-weight:700;letter-spacing:.01em;
    border:none;border-radius:14px;cursor:pointer;
    box-shadow:0 10px 28px rgba(37,211,102,.35);
    transition:transform .15s ease, box-shadow .2s ease, opacity .2s ease;
  }
  .emulator-open-btn i{font-size:20px}
  .emulator-open-btn:active{transform:translateY(1px);box-shadow:0 6px 18px rgba(37,211,102,.3)}

  /* The "WhatsApp emulator" caption above the inline phone is desktop-only —
     on mobile the phone is hidden until the overlay opens, so the caption
     would float over nothing. */
  .emulator-title{display:none}

  /* Hide the 3D phone shell on mobile — the chat now lives in the overlay. */
  .iphone-frame{
    zoom:1;             /* cancel the desktop 0.9 shrink — overlay is fullscreen */
    position:fixed;
    top:var(--nav-height,80px);left:0;right:0;bottom:0;
    width:100%;height:auto;
    margin:0;padding:0;
    border-radius:0;box-shadow:none;
    background:#fff;
    z-index:199;        /* nav is z-index:200, so it stays on top */
    animation:none;
    transform:none;
    display:none;       /* hidden until the overlay is opened */
  }
  .iphone-frame::before{display:none}
  .iphone-frame .face{display:none}
  .iphone-screen{border-radius:0;transform:none}
  .iphone-status-bar{display:none}
  /* The side tabs would obstruct the fullscreen overlay; the inline
     reset button in .hero-actions takes over on mobile. */
  .phone-side-tabs{display:none}
  #emulator-mount,
  #emulator-mount .nui-wa-container{height:100%}
  #emulator-mount .nui-wa-header{padding-top:14px}

  /* Open state — overlay visible, body scroll locked. The cartaja nav stays
     a close target too (see js/demo.js) but the visual "tap to close" cue
     now lives in the dedicated close-bar at the top of the overlay below. */
  body.is-emulator-open{overflow:hidden}
  body.is-emulator-open .iphone-frame{display:flex; flex-direction:column}
  body.is-emulator-open .lang-switch{display:none}
  body.is-emulator-open nav{cursor:pointer}
  /* Lift the demo-stage's stacking context above the rest of the page so
     the iphone-frame inside it (z-index:199 within demo-stage) doesn't
     get painted over by later sections like .intro-band whose
     .intro-content also has z-index:1. Stays below the nav (z:200). */
  body.is-emulator-open .demo-stage{z-index:198}

  /* Close bar — pinned at the very top of the fullscreen overlay, just
     below the cartaja nav. Left side names the surface, right side hints
     at the dismiss gesture. The whole bar is tappable. */
  body.is-emulator-open .emulator-close-bar{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 16px;
    background:#009688;
    color:#fff;
    font-size:13px;font-weight:600;letter-spacing:.01em;
    flex-shrink:0;
    cursor:pointer;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  .emulator-close-bar-title{font-weight:700;letter-spacing:.02em}
  .emulator-close-bar-cta{
    font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    color:rgba(255,255,255,.78);
  }

  /* The "Pick a store" subtitle band has been folded into the close-bar
     title ("WhatsApp emulator, pick a store") — kept globally hidden via
     the rule outside this media query. The chats-header's 52px notch
     padding-top is still dead space here, so tighten it. */
  body.is-emulator-open #emulator-mount .nui-wa-chats-header{
    padding-top:6px;
  }

  /* The iphone-screen takes whatever vertical space is left below the bar. */
  body.is-emulator-open .iphone-screen{flex:1 1 auto;min-height:0}

  /* Hide the scrollbar inside the chat textarea — it still scrolls, but
     the visible chrome was getting in the way of the input row on mobile. */
  #emulator-mount .nui-wa-input textarea{
    scrollbar-width:none;       /* Firefox */
    -ms-overflow-style:none;    /* IE/old Edge */
  }
  #emulator-mount .nui-wa-input textarea::-webkit-scrollbar{
    width:0; height:0; display:none;
  }

  .hero-actions{flex-direction:column}
  .hero-actions .btn-primary-cta,.hero-actions .btn-ghost{width:100%;text-align:center}
  .float-cta{left:12px;right:12px;transform:translateY(200%);bottom:12px;flex-wrap:wrap}
  .float-cta.show{transform:translateY(0)}
}

/* ═══════════════════════════════════════════════════════════════════════
   NEW HERO — body.demo-new-hero (index.new.html)
   ─────────────────────────────────────────────
   A single column on mobile (intro → demo → cta) and a two-column grid on
   desktop where the demo-panel sits to the right and spans the full height
   of the marketing copy on the left. All chat-related controls live inside
   .demo-panel so the user never has to look elsewhere to drive the demo.
   ═══════════════════════════════════════════════════════════════════════ */

body.demo-new-hero .demo-stage .hero{
  display:grid;
  grid-template-columns:1fr;
  grid-template-areas:
    "intro"
    "demo"
    "cta";
  gap:24px;
  padding:8px 24px 40px;
  align-items:start;
  max-width:1280px;width:100%;margin:0 auto;
}
@media (min-width: 641px){
  body.demo-new-hero .demo-stage .hero{padding:8px 40px 40px}
}
body.demo-new-hero .hero-intro{grid-area:intro;display:flex;flex-direction:column;gap:14px;min-width:0}
body.demo-new-hero .hero-demo {grid-area:demo;display:flex;justify-content:center;min-width:0;perspective:1600px}
body.demo-new-hero .hero-cta  {grid-area:cta; display:flex;flex-direction:column;gap:14px;min-width:0}

@media (min-width: 1024px){
  body.demo-new-hero .demo-stage .hero{
    grid-template-columns:minmax(0,1.05fr) minmax(0,440px);
    grid-template-areas:
      "intro demo"
      "cta   demo";
    gap:32px 48px;
    padding:8px 60px 40px;
    align-items:start;
  }
  body.demo-new-hero .hero-demo{
    /* Center the panel vertically against the full left column. */
    align-self:center;
  }
}

/* ── Demo panel: toolbar + phone + info, all on one card-like axis. ── */
body.demo-new-hero .demo-panel{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  width:100%;max-width:420px;
}

/* Toolbar — glass strip above the phone that frames the demo and exposes
   the two non-chat actions (Help, Reset). */
body.demo-new-hero .demo-toolbar{
  width:100%;
  padding:12px 14px 14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  display:flex;flex-direction:column;gap:10px;
}
body.demo-new-hero .demo-toolbar-eyebrow{
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
body.demo-new-hero .demo-toolbar-row{display:flex;gap:8px;align-items:stretch}

/* Native <select> dressed up to match the brand. The chevron is a separate
   sibling icon because cross-browser `appearance:none` removes the native
   arrow and there's no reliable single-element substitute. */
body.demo-new-hero .demo-store-select-wrap{position:relative;flex:1;min-width:0}
body.demo-new-hero .demo-store-select{
  width:100%;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding:11px 38px 11px 14px;
  background:var(--ivory,#fdf7eb);color:var(--heading-color,#043a3c);
  border:none;border-radius:11px;
  font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.01em;
  line-height:1.2;
  cursor:pointer;outline:none;
  /* The 16px guarantee that keeps iOS Safari from auto-zooming on focus —
     16px is the threshold; pair it with the visual 14px via transform:none. */
}
@media (max-width:640px){
  body.demo-new-hero .demo-store-select{font-size:16px;padding:12px 38px 12px 14px}
}
body.demo-new-hero .demo-store-select:focus-visible{
  box-shadow:0 0 0 3px rgba(37,211,102,.45);
}
body.demo-new-hero .demo-store-select-chevron{
  position:absolute;top:50%;right:10px;
  transform:translateY(-50%);
  pointer-events:none;
  color:var(--heading-color,#043a3c);
  font-size:22px;line-height:1;opacity:.7;
}
[dir="rtl"] body.demo-new-hero .demo-store-select{padding:11px 14px 11px 38px}
[dir="rtl"] body.demo-new-hero .demo-store-select-chevron{right:auto;left:10px}

/* Action icon buttons (Help, Reset). 44px tall to match the select height. */
body.demo-new-hero .demo-action-btn{
  position:relative;
  width:44px;height:44px;flex:0 0 44px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.16);
  border-radius:11px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .15s ease, border-color .2s ease;
}
body.demo-new-hero .demo-action-btn:hover{
  background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.28);
  transform:translateY(-1px);
}
body.demo-new-hero .demo-action-btn:active{transform:translateY(0)}
body.demo-new-hero .demo-action-btn .mi{
  font-size:22px;
}
/* Tooltip on hover/focus — sits below the button so it doesn't fight the
   phone above. Falls back to the aria-label for assistive tech. */
body.demo-new-hero .demo-action-tip{
  position:absolute;top:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(-4px);
  padding:6px 10px;border-radius:8px;
  background:rgba(4,58,60,.95);
  color:#fefefe;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s ease, transform .15s ease;
  z-index:6;
}
body.demo-new-hero .demo-action-btn:hover .demo-action-tip,
body.demo-new-hero .demo-action-btn:focus-visible .demo-action-tip{
  opacity:1;transform:translateX(-50%) translateY(0);
}

/* About-this-store text below the phone. Tight, centered, secondary. */
body.demo-new-hero .demo-info{
  width:100%;max-width:380px;
  text-align:center;
}
body.demo-new-hero .demo-info .uc-description{
  font-size:13.5px;line-height:1.5;
  color:rgba(255,255,255,.7);
  margin:0 0 6px;
  min-height:0;
}
body.demo-new-hero .demo-info .uc-meta{
  font-size:11.5px;color:rgba(255,255,255,.42);
  display:inline-flex;align-items:center;gap:6px;
  letter-spacing:.02em;
}
body.demo-new-hero .demo-info .uc-meta .mi,
body.demo-new-hero .demo-info .uc-meta .uc-meta-icon{
  font-size:14px;color:var(--whatsapp,#25D366);opacity:.85;
}

/* Hide legacy elements that the new layout replaces. */
body.demo-new-hero .use-case-picker:not(select),
body.demo-new-hero .phone-side-tabs,
body.demo-new-hero .phone-with-tabs{display:none}

/* On mobile the iphone-frame is replaced inline by the emulator-open-btn
   (existing behavior); make sure the open-btn is full-width inside the panel.
   Existing media query at the top of demo.css handles the rest. Also: long
   store names won't fit alongside two icon buttons on a narrow viewport, so
   wrap the row — select takes the full width, action buttons drop below it. */
@media (max-width:640px){
  body.demo-new-hero .demo-panel .emulator-open-btn{width:100%}
  body.demo-new-hero .demo-toolbar-row{flex-wrap:wrap;justify-content:flex-end}
  body.demo-new-hero .demo-store-select-wrap{flex:1 1 100%}
}

/* ═══════════════════════════════════════════════════════════════════════
   MACOS-DOCK VARIANT — body.demo-dock (index.new.2.html)
   ─────────────────────────────────────────────
   Vertical glass bar pinned to the left of the iphone-frame. Hovered icons
   magnify away from the phone and reveal a tooltip bubble to their left.
   Buttons are populated by renderPhoneDock() in js/demo.js so the dock
   stays in sync with the existing use-case state.
   ═══════════════════════════════════════════════════════════════════════ */

/* Hide the legacy side tabs — the dock replaces them visually. */
body.demo-dock .phone-side-tabs{display:none}

body.demo-dock .phone-dock{
  position:absolute;
  /* Sit 3px outside the phone's left bezel and bottom-anchored just above
     the phone's bottom-left corner curve. The iphone-frame's border-radius
     is 55px × zoom(0.9) ≈ 50px of visual curvature, so anchoring the dock
     at bottom:50px places its bottom edge right where the side stops being
     straight and starts curving toward the bottom edge. Using
     `right:calc(100% + 3px)` keeps the horizontal gap fixed regardless of
     the dock's own width. */
  bottom:50px;right:calc(100% + 3px);
  display:flex;flex-direction:column;align-items:center;
  gap:6px;
  padding:8px 8px;
  background:rgba(30,30,30,.55);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 12px 36px rgba(0,0,0,.42);
  z-index:6;
  /* Fade in after the iphone-frame zoomIn entrance settles (1.9s). */
  opacity:0;
  animation:dockFadeIn .5s ease 1.9s 1 forwards;
}
@keyframes dockFadeIn{ to{ opacity:1 } }

/* Each button — rounded square, glass tile. transform-origin:right center
   means the magnification grows AWAY from the phone (to the left), the
   same direction the user's mouse is travelling. */
body.demo-dock .phone-dock-btn{
  position:relative;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  color:#fefefe;
  cursor:pointer;
  /* The transform is set by JS (setupDockMagnification) so that *neighbors*
     of the hovered button also scale, with a cosine falloff — like the
     macOS dock fisheye. CSS only handles colour-state on hover and a fast
     transition to smooth the inter-frame transform changes. */
  transform-origin:right center;
  transition:transform .12s ease-out,
             background .2s ease, border-color .2s ease;
}
body.demo-dock .phone-dock-btn:hover{
  background:rgba(255,255,255,.28);
  border-color:rgba(255,255,255,.32);
  z-index:2;
}
/* Pressed feedback without touching `transform` (JS owns transform). */
body.demo-dock .phone-dock-btn:active{filter:brightness(.92)}
body.demo-dock .phone-dock-btn:focus-visible{outline:2px solid rgba(37,211,102,.6);outline-offset:2px}

/* Active marker — small dot just outside the button on the phone-side */
body.demo-dock .phone-dock-btn.is-active{
  background:rgba(37,211,102,.32);
  border-color:rgba(37,211,102,.55);
}
body.demo-dock .phone-dock-btn.is-active::after{
  content:'';position:absolute;
  right:-7px;top:50%;
  width:3px;height:3px;border-radius:50%;
  background:rgba(255,255,255,.9);
  transform:translateY(-50%);
}

body.demo-dock .phone-dock-icon{
  font-size:22px;line-height:1;
  font-variation-settings:'FILL' 1,'wght' 500;
}

/* Section label that floats just above the dock. Anchored to the dock's
   top edge via bottom:100%+gap so it tracks the dock without joining the
   fisheye magnification (the JS filter skips this element entirely). */
body.demo-dock .phone-dock-label{
  position:absolute;
  bottom:calc(100% + 8px);
  left:0;right:0;
  text-align:center;
  font-size:9.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  line-height:1.2;
  color:rgba(255,255,255,.72);
  text-shadow:0 1px 2px rgba(0,0,0,.4);
  pointer-events:none;
  white-space:normal;
}

/* Separator — thin line spanning most of the dock width. */
body.demo-dock .phone-dock-sep{
  width:24px;height:1px;
  background:rgba(255,255,255,.22);
  margin:4px 0;
  flex:0 0 auto;
}

/* Tooltip bubble — appears to the LEFT of the hovered button. Lives inside
   the button so it scales with the magnify transform; that's intentional,
   the slight bump makes the label easier to read while hovering. */
body.demo-dock .phone-dock-tip{
  position:absolute;
  right:calc(100% + 10px);top:50%;
  transform:translateY(-50%);
  padding:5px 10px;
  background:rgba(4,58,60,.95);
  color:#fefefe;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;
  white-space:nowrap;
  border-radius:7px;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}
/* Small arrow on the right side of the tooltip pointing to the icon. */
body.demo-dock .phone-dock-tip::after{
  content:'';position:absolute;
  left:100%;top:50%;
  margin-top:-4px;
  border:4px solid transparent;
  border-left-color:rgba(4,58,60,.95);
}
body.demo-dock .phone-dock-btn:hover .phone-dock-tip,
body.demo-dock .phone-dock-btn:focus-visible .phone-dock-tip{opacity:1}

/* RTL: dock attaches to the right side of the phone; tooltip appears on
   the right. Magnification grows leftward... wait — outward, so rightward. */
[dir="rtl"] body.demo-dock .phone-dock{right:auto;left:calc(100% + 3px)}
[dir="rtl"] body.demo-dock .phone-dock-btn{transform-origin:left center}
[dir="rtl"] body.demo-dock .phone-dock-btn.is-active::after{right:auto;left:-7px}
[dir="rtl"] body.demo-dock .phone-dock-tip{right:auto;left:calc(100% + 10px)}
[dir="rtl"] body.demo-dock .phone-dock-tip::after{
  left:auto;right:100%;
  border-left-color:transparent;border-right-color:rgba(4,58,60,.95);
}

/* Hide the dock on the mobile fullscreen-overlay viewport — it would block
   the chat. The user still has the legacy reset button in .hero-actions. */
@media (max-width:640px){
  body.demo-dock .phone-dock{display:none}
}