/* =====================================================================
   hi2holiday — shared marketing stylesheet (vp.css)
   Single source of truth for ALL marketing pages (home + SEO sub-pages).
   Linked by every page after Tailwind CDN. Extracted verbatim from the
   original index.html inline <style>, with a SHARED HEADER/NAV/FOOTER
   block appended at the end (dropdown + mobile hamburger) so the new
   multi-page nav works without per-page CSS.
   Pages also load Tailwind via CDN + the same fonts in their <head>.
   ===================================================================== */

  /* ---------- Self-hosted fonts (ZERO external CDN) ----------
     Inter (UI/body, variable 400–800) + Fraunces (display, variable 400–600,
     optical-sizing via the woff2 opsz axis). woff2 live in ./fonts/** and are
     served from the same origin — matching the panel + villa sites. Replaces
     the former Google Fonts <link>s in every page head. Playfair Display +
     Manrope were in the old CDN URL but unused / fallback-only, so they are
     intentionally not vendored. */
  @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/inter/inter-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
  @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/inter/inter-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
  @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/inter/inter-greek-ext.woff2') format('woff2'); unicode-range: U+1F00-1FFF; }
  @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/inter/inter-greek.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
  @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/inter/inter-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
  @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/inter/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
  @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/inter/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/fraunces/fraunces-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
  @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/fraunces/fraunces-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

  :root { --ease: cubic-bezier(.16,1,.3,1); }
  html { scroll-behavior: smooth; }
  body { font-family: "Inter", sans-serif; color: #0A0A0B; -webkit-font-smoothing: antialiased; }
  .font-display { font-family: "Fraunces", serif; font-optical-sizing: auto; }
  .anchor-offset { scroll-margin-top: 96px; }
  ::selection { background: #FF385C; color: #fff; }

  .h-balance { text-wrap: balance; }
  .lead-tight { line-height: 1.02; letter-spacing: -0.035em; }

  /* ---------- FAQ ---------- */
  .faq-body { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
  .faq-item.open .faq-body { max-height: 360px; }
  .faq-item.open .faq-chevron { transform: rotate(45deg); }
  .faq-chevron { transition: transform .4s var(--ease); }

  /* ---------- Scroll reveal ---------- */
  .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); will-change: opacity, transform; }
  .reveal.is-visible { opacity: 1; transform: none; }
  .reveal-fade { opacity: 0; transition: opacity 1.1s var(--ease); }
  .reveal-fade.is-visible { opacity: 1; }
  .reveal-scale { opacity: 0; transform: scale(.94); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
  .reveal-scale.is-visible { opacity: 1; transform: none; }
  .stagger > * { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .stagger.is-visible > * { opacity: 1; transform: none; }
  .stagger.is-visible > *:nth-child(1){transition-delay:.00s}
  .stagger.is-visible > *:nth-child(2){transition-delay:.08s}
  .stagger.is-visible > *:nth-child(3){transition-delay:.16s}
  .stagger.is-visible > *:nth-child(4){transition-delay:.24s}
  .stagger.is-visible > *:nth-child(5){transition-delay:.32s}
  .stagger.is-visible > *:nth-child(6){transition-delay:.40s}
  .stagger.is-visible > *:nth-child(7){transition-delay:.48s}
  .stagger.is-visible > *:nth-child(8){transition-delay:.56s}

  /* ---------- Nav ---------- */
  #nav { transition: background-color .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease); }
  #nav.nav-top { background-color: rgba(255,255,255,0); box-shadow: none; border-color: transparent; backdrop-filter: blur(0px); }
  #nav.nav-scrolled { background-color: rgba(255,255,255,.72); box-shadow: 0 1px 0 rgba(15,15,20,.05); border-color: rgba(231,231,233,.9); backdrop-filter: saturate(180%) blur(20px); }
  #nav .nav-bar { transition: height .4s var(--ease); }
  #nav.nav-scrolled .nav-bar { height: 64px; }

  /* ---------- hi2holiday wordmark (brand logo) ----------
     Typographic mark that replaces the old house-icon box + brand text.
     'hi'      = Airbnb pink, extra-bold
     '2'       = a lighter italic numeral — a tasteful, distinct accent
     'holiday' = near-black
     The '2'/'holiday' colour is driven by --wm-ink so the mark reads white over
     the dark hero (#nav.nav-top) and flips to near-black once the bar turns light
     (scrolled) or when it sits in the footer / mobile menu (default ink). */
  .vp-wordmark { --wm-ink: #1B1E24; display: inline-flex; align-items: baseline;
    font-family: "Inter","Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
    font-weight: 800; letter-spacing: -0.03em; line-height: 1; white-space: nowrap;
    transition: opacity .3s var(--ease); }
  a:hover > .vp-wordmark { opacity: .82; }
  .vp-wm-hi { color: #FF5A5F; }
  .vp-wm-2 { color: var(--wm-ink); font-weight: 600; font-style: italic; font-size: .94em; padding: 0 .02em; }
  .vp-wm-holiday { color: var(--wm-ink); }
  #nav.nav-top .vp-wordmark { --wm-ink: #ffffff; }
  .vp-wm-2, .vp-wm-holiday { transition: color .4s var(--ease); }

  /* ---------- Brand lockup: wordmark + slogan ----------
     Wraps the wordmark so the slogan sits directly beneath it as a 2-line
     lockup, left-aligned under 'hi'. --wm-ink is (re)declared on .vp-brand so
     the slogan — a SIBLING of the wordmark, not a descendant — inherits the
     same ink and mirrors the wordmark exactly: near-black on light surfaces,
     white over the dark hero (#nav.nav-top). The wordmark itself is untouched. */
  .vp-brand { --wm-ink: #1B1E24; display: inline-flex; flex-direction: column;
    align-items: flex-start; gap: 1px; line-height: 1; }
  #nav.nav-top .vp-brand { --wm-ink: #ffffff; }
  .vp-wm-slogan { font: 500 8.5px/1.1 "Inter", system-ui, sans-serif;
    letter-spacing: .07em; color: var(--wm-ink); opacity: .82; white-space: nowrap;
    transition: color .4s var(--ease); }
  footer .vp-wm-slogan { font-size: 9.5px; }

  /* ---------- Hero ---------- */
  #heroBg { will-change: transform; }
  #heroMock { will-change: transform; }
  #heroHeadline { will-change: transform, opacity; }
  .grain:after {
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.04; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }
  .kicker { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #FF385C; }

  /* ---------- Marquee ---------- */
  .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
  .marquee-track { display: inline-flex; align-items: center; gap: 3rem; white-space: nowrap; animation: marquee 32s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* ---------- Divider ---------- */
  .divider-draw { height: 1px; background: linear-gradient(90deg, transparent, #E7E7E9, transparent); transform: scaleX(0); transform-origin: center; transition: transform 1.3s var(--ease); }
  .divider-draw.is-visible { transform: scaleX(1); }

  /* ---------- Story (pinned) ---------- */
  .story-step { opacity: .22; transform: translateY(8px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
  .story-step.story-active { opacity: 1; transform: none; }

  /* ---------- Scrolly SCENE SYSTEM (pure SVG/CSS, scroll-driven) ---------- */
  /* The left stage holds FIVE stacked scene layers. JS sets, per stage:
       --act0..--act4 : 0..1  crossfade opacity of each scene (only active ±1 lit)
       --p0..--p4     : 0..1  LOCAL progress of each scene's sub-animation
     Each scene reads its own --pN to drive its internal motion (transform/opacity/
     stroke-dashoffset only). Scenes that aren't lit sit at opacity 0 + pointer-events
     off, so nothing from an earlier scene bleeds into a later step. */
  .stage-art {
    --act0:0; --act1:0; --act2:0; --act3:0; --act4:0;
    --p0:0; --p1:0; --p2:0; --p3:0; --p4:0;
    --s2vf:0; --s2iris:0; --s2flash:0; --s2col:0; --s2info:0; --s2pub:0;
    --s3hero:0; --s3rows:0; --s3phone:0;
    --s4wire:0; --s4flow:0; --s4ok:0;
    --s5card:0; --s5press:0; --s5ok:0;
    position:absolute; inset:0; overflow:hidden;
  }
  /* tasteful backdrop so the scenes pop */
  .stage-art::before {
    content:""; position:absolute; inset:0; z-index:0;
    background:
      radial-gradient(120% 90% at 30% 18%, rgba(255,56,92,.10), transparent 55%),
      radial-gradient(110% 90% at 80% 90%, rgba(124,92,255,.10), transparent 55%),
      linear-gradient(160deg, #14161c 0%, #0c0d11 100%);
  }
  /* faint blueprint grid backdrop */
  .stage-grid {
    position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.4;
    background-image:
      linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(85% 80% at 50% 46%, #000 55%, transparent 100%);
            mask-image: radial-gradient(85% 80% at 50% 46%, #000 55%, transparent 100%);
  }
  /* one scene layer */
  .scene {
    position:absolute; inset:0; z-index:2;
    display:flex; align-items:center; justify-content:center;
    pointer-events:none; will-change:opacity, transform;
  }
  .scene-0 { opacity:var(--act0); transform:scale(calc(.97 + var(--act0)*.03)); }
  .scene-1 { opacity:var(--act1); transform:scale(calc(.97 + var(--act1)*.03)); }
  .scene-2 { opacity:var(--act2); transform:scale(calc(.97 + var(--act2)*.03)); }
  .scene-3 { opacity:var(--act3); transform:scale(calc(.97 + var(--act3)*.03)); }
  .scene-4 { opacity:var(--act4); transform:scale(calc(.97 + var(--act4)*.03)); }
  .scene-pad { position:relative; width:min(92%, 560px); }
  @keyframes aiblink { 50% { opacity:0; } }
  .ai-cursor { animation: aiblink 1s steps(1) infinite; }

  /* ===== SCENE 1 — sign-up form (drives off --p0) ===== */
  .su-card { width:min(90%, 380px); margin:0 auto; background:#fff; border:1px solid #e3e2df;
    border-radius:20px; padding:24px 22px; color:#222328;
    box-shadow:0 26px 70px -22px rgba(0,0,0,.6);
    transform: translateY(calc((1 - var(--p0)) * 26px)); }
  .su-title { font:600 19px/1.1 "Fraunces", serif; }
  .su-sub { color:#8a8a90; font:400 12.5px/1.3 "Inter",sans-serif; margin-top:4px; }
  .su-field { margin-top:14px; }
  .su-label { font:600 11.5px/1 "Inter",sans-serif; color:#52535a; }
  .su-input { margin-top:6px; height:38px; border-radius:11px; border:1.5px solid #e3e2df;
    background:#fbfaf8; display:flex; align-items:center; padding:0 12px;
    font:500 13px/1 "Inter",sans-serif; color:#222328; transition:border-color .25s var(--ease), background .25s var(--ease); }
  .su-field.on .su-input { border-color:#FF385C; background:#fff; }
  .su-field.done .su-input { border-color:#abefc6; background:#fff; }
  .su-val { white-space:nowrap; overflow:hidden; }
  .su-mask { letter-spacing:.18em; }
  .su-tick { margin-left:auto; color:#17b26a; opacity:0; transform:scale(.6); transition:opacity .3s var(--ease), transform .3s var(--ease); }
  .su-field.done .su-tick { opacity:1; transform:scale(1); }
  .su-btn { margin-top:18px; height:42px; border-radius:9999px; display:flex; align-items:center;
    justify-content:center; gap:8px; font:600 14px/1 "Inter",sans-serif; color:#fff;
    background:#cfd0d4; transition:background .3s var(--ease), box-shadow .3s var(--ease); }
  .su-btn.lit { background:#FF385C; box-shadow:0 14px 34px -12px rgba(255,56,92,.7); }
  .su-btn .lbl-go, .su-btn .lbl-ok { display:inline-flex; align-items:center; gap:7px; }

  /* ===== SCENE 2 — camera framing + iris shutter, FULL panel (drives off --p1) ===== */
  /* Local windows within --p1: 0..0.30 frame, 0.30..0.55 shutter (iris close/open),
     0.55..0.80 details fill, 0.80..1 publish beat. */
  .cam { position:absolute; inset:0; }
  .cam-hero { position:absolute; inset:0; overflow:hidden; }
  .cam-hero svg { width:100%; height:100%; display:block; }
  .cam-gray { opacity: calc(1 - var(--s2col)); }
  .cam-color { opacity: var(--s2col); }
  /* viewfinder sized to the WHOLE panel */
  .vf { position:absolute; inset:0; z-index:5; pointer-events:none; opacity: var(--s2vf); will-change:opacity; }
  .vf svg { width:100%; height:100%; display:block; }
  .vf-thirds line { stroke: rgba(255,255,255,.35); stroke-width:1; vector-effect:non-scaling-stroke; }
  .vf-bracket { stroke:#fff; stroke-width:2; fill:none; vector-effect:non-scaling-stroke; }
  .vf-read { position:absolute; top:16px; left:16px; z-index:6;
    font:600 11px/1.3 "Inter",sans-serif; letter-spacing:.04em; color:#fff; opacity:var(--s2vf); }
  .vf-rec { position:absolute; top:16px; right:16px; z-index:6; opacity:var(--s2vf);
    display:flex; align-items:center; gap:6px; font:700 11px/1 "Inter",sans-serif; color:#fff; letter-spacing:.12em; }
  .vf-rec .dot { width:8px; height:8px; border-radius:9999px; background:#FF385C; }
  /* iris over the FULL panel */
  .iris { position:absolute; inset:0; z-index:7; pointer-events:none;
    opacity: calc(min(1, var(--s2iris) * 8)); will-change:opacity; }
  .iris-svg { width:100%; height:100%; display:block; overflow:visible; }
  .iris-blade { transform-box: fill-box; transform-origin: 0px 0px;
    transform: rotate(calc((1 - var(--s2iris)) * 58deg)); will-change: transform; }
  .iris-flash { position:absolute; inset:0; z-index:8; pointer-events:none; background:#fff;
    opacity: var(--s2flash); will-change:opacity; }
  /* villa detail card (bottom of panel) */
  .cam-info { position:absolute; left:50%; bottom:6%; z-index:6; transform:translateX(-50%);
    width:min(82%, 420px);
    opacity: var(--s2info);
    will-change:opacity, transform; }
  .cam-info-inner { transform: translateY(calc((1 - var(--s2info)) * 22px));
    background:#fff; border:1px solid #e3e2df; border-radius:18px; padding:18px 20px;
    color:#222328; box-shadow:0 22px 60px -18px rgba(0,0,0,.55); }
  .info-loc { color:#6B6B70; }
  .ai-body { color:#3a3b40; }
  .info-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:9999px;
    background:#f3f2f0; border:1px solid #e3e2df; color:#3a3b40; font:600 12px/1 "Inter",sans-serif; }
  .ai-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:9999px;
    background:#FFE9EE; border:1px solid #FFC2CF; color:#D81E47; font:700 10.5px/1 "Inter",sans-serif; letter-spacing:.08em; }
  /* published beat */
  .cam-pub { position:absolute; left:50%; top:14%; z-index:9; transform:translateX(-50%) scale(calc(.8 + var(--s2pub)*.2));
    opacity: var(--s2pub); will-change:opacity, transform;
    display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:9999px;
    background:#ecfdf3; border:1px solid #abefc6; color:#067647; font:700 12px/1 "Inter",sans-serif; letter-spacing:.04em; }
  .cam-pub .dot { width:7px; height:7px; border-radius:9999px; background:#17b26a; }

  /* ===== SCENE 3 — sample villa site, desktop + phone (drives off --p2) ===== */
  .design { position:relative; width:min(94%, 600px); }
  .browser { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 26px 70px -22px rgba(0,0,0,.6);
    transform: translateY(calc((1 - var(--p2)) * 26px)); }
  .browser-bar { height:30px; background:#f1f0ee; display:flex; align-items:center; gap:6px; padding:0 12px; border-bottom:1px solid #e7e6e3; }
  .browser-bar i { width:8px; height:8px; border-radius:9999px; display:inline-block; }
  .browser-url { margin-left:8px; flex:1; height:13px; border-radius:7px; background:#fff; border:1px solid #e3e2df;
    font:500 8.5px/13px "Inter",sans-serif; color:#9a9a9f; padding:0 8px; max-width:220px; overflow:hidden; white-space:nowrap; }
  .site-nav { display:flex; align-items:center; gap:10px; padding:11px 16px; color:var(--d-text,#1b1c20); }
  .site-logo { font:600 13px/1 "Fraunces",serif; }
  .site-links { margin-left:auto; display:flex; gap:12px; font:500 9.5px/1 "Inter",sans-serif; opacity:.7; }
  .site-cta { padding:5px 11px; border-radius:9999px; background:var(--d-accent,#FF385C); color:#fff; font:600 9px/1 "Inter",sans-serif; }
  .site-hero { position:relative; height:150px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:16px; color:#fff;
    clip-path: inset(0 calc((1 - var(--s3hero)) * 100% ) 0 0); }
  .site-hero h3 { font:600 24px/1 "Fraunces",serif; }
  .site-hero p { font:400 10px/1.2 "Inter",sans-serif; opacity:.9; margin-top:5px; }
  .site-hero .book { margin-top:10px; align-self:flex-start; padding:7px 14px; border-radius:9999px; background:var(--d-accent,#FF385C); color:#fff; font:600 10px/1 "Inter",sans-serif; }
  .site-gallery { display:flex; gap:6px; padding:12px 16px 4px; }
  .site-gallery span { flex:1; height:38px; border-radius:7px; background:#dfe3e6;
    opacity: var(--s3rows); transform: translateY(calc((1 - var(--s3rows))*8px)); }
  .site-amen { display:flex; gap:8px; padding:8px 16px 4px; opacity:var(--s3rows); }
  .site-amen span { padding:4px 9px; border-radius:9999px; background:#f1f1f0; font:600 8.5px/1 "Inter",sans-serif; color:#52535a; }
  .site-book { margin:8px 16px 16px; padding:11px 13px; border-radius:12px; border:1px solid #ececea;
    display:flex; align-items:center; justify-content:space-between; opacity:var(--s3rows); }
  .site-book .price { font:600 15px/1 "Fraunces",serif; color:#1b1c20; }
  .site-book .price small { font:400 9px/1 "Inter",sans-serif; color:#9a9a9f; }
  .site-book .reserve { padding:7px 13px; border-radius:9999px; background:var(--d-accent,#FF385C); color:#fff; font:600 9.5px/1 "Inter",sans-serif; }
  .design-theme { position:absolute; top:-30px; left:0; display:flex; gap:6px; opacity:var(--p2); }
  .design-theme i { width:13px; height:13px; border-radius:9999px; box-shadow:0 0 0 2px rgba(255,255,255,.15); }
  .design-name { position:absolute; top:-30px; right:0; font:600 11px/1 "Inter",sans-serif; color:#fff; opacity:calc(var(--p2)*.85); letter-spacing:.02em; }
  /* phone in the corner */
  .phone { position:absolute; right:-2%; bottom:-8%; width:23%; min-width:96px;
    background:#0c0d11; border-radius:18px; padding:6px; box-shadow:0 24px 60px -18px rgba(0,0,0,.7);
    opacity: var(--s3phone); transform: translate(calc((1 - var(--s3phone)) * 30px), calc((1 - var(--s3phone)) * 20px)); will-change:opacity, transform; }
  .phone-screen { background:#fff; border-radius:13px; overflow:hidden; }
  .phone-nav { display:flex; align-items:center; padding:7px 8px; }
  .phone-nav .pl { font:600 8px/1 "Fraunces",serif; color:var(--d-text,#1b1c20); }
  .phone-nav .pc { margin-left:auto; width:14px; height:5px; border-radius:9999px; background:var(--d-accent,#FF385C); }
  .phone-hero { height:54px; }
  .phone-body { padding:7px 8px; display:flex; flex-direction:column; gap:5px; }
  .phone-body .r { height:6px; border-radius:3px; background:#e6e7e9; }
  .phone-body .r.s { width:60%; }
  .phone-body .b { margin-top:2px; height:13px; border-radius:7px; background:var(--d-accent,#FF385C); }

  /* ===== SCENE 4 — calendar sync (drives off --p3) ===== */
  .sync { position:relative; width:min(94%, 540px); }
  .sync-svg { width:100%; height:auto; display:block; overflow:visible; }
  .sync-wire { fill:none; stroke:#3a3d47; stroke-width:2; stroke-linecap:round;
    stroke-dasharray: var(--wlen, 240); stroke-dashoffset: calc(var(--wlen,240) * (1 - var(--s4wire))); }
  .sync-dot { fill:#FF385C; opacity: var(--s4flow);
    transform: translateX(calc(var(--s4flow) * var(--dx,0px))) translateY(calc(var(--s4flow) * var(--dy,0px)));
    will-change: transform, opacity; }
  .sync-chip { font:600 11px/1 "Inter",sans-serif; }
  /* brand-name text inside the channel pills — tighter so "Booking.com" fits the pill */
  .sync-brand { font:600 10px/1 "Inter",sans-serif; letter-spacing:-0.1px; }
  .sync-cell { transition:none; }
  .sync-ok { opacity: var(--s4ok); transform: translateY(calc((1 - var(--s4ok)) * 10px)); will-change:opacity, transform; }

  /* ===== SCENE 5 — payments (drives off --p4) ===== */
  .pay { position:relative; width:min(92%, 460px); }
  .pay-methods { display:flex; gap:9px; justify-content:center; margin-bottom:18px; }
  .pay-pill { padding:8px 15px; border-radius:11px; font:700 12px/1 "Inter",sans-serif; color:#fff;
    box-shadow:0 12px 30px -12px rgba(0,0,0,.6); will-change:opacity, transform; }
  .pay-card { position:relative; background:linear-gradient(135deg,#23252e,#101218); border-radius:18px;
    padding:20px; color:#fff; box-shadow:0 26px 70px -22px rgba(0,0,0,.7);
    transform: translateY(calc((1 - var(--s5card)) * 24px)) rotate(calc((1 - var(--s5card)) * -3deg));
    opacity: var(--s5card); will-change:opacity, transform; }
  .pay-card .chip { width:34px; height:24px; border-radius:6px; background:linear-gradient(135deg,#f5d77e,#caa12f); }
  .pay-card .num { margin-top:18px; font:600 15px/1 "Inter",sans-serif; letter-spacing:.12em; }
  .pay-card .row { margin-top:14px; display:flex; justify-content:space-between; font:500 9px/1.3 "Inter",sans-serif; opacity:.75; }
  .pay-btn { margin-top:16px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center;
    gap:8px; font:700 14px/1 "Inter",sans-serif; color:#fff; background:#FF385C;
    transform: scale(calc(1 - var(--s5press) * .04)); box-shadow:0 16px 36px -14px rgba(255,56,92,.7); will-change:transform; }
  .pay-ok { margin-top:14px; text-align:center; opacity: var(--s5ok); transform: translateY(calc((1 - var(--s5ok)) * 10px)); will-change:opacity, transform; }
  .pay-ok .badge { display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:9999px;
    background:#ecfdf3; border:1px solid #abefc6; color:#067647; font:700 13px/1 "Inter",sans-serif; }
  .pay-ok .split { margin-top:9px; font:500 11px/1.4 "Inter",sans-serif; color:rgba(255,255,255,.6); }

  /* mobile stage: shrink scene paddings so nothing overflows at 380px */
  #storyStageM .scene-pad { width:min(94%, 340px); }
  #storyStageM .su-card { width:min(94%, 300px); padding:18px 16px; }
  #storyStageM .design { width:min(96%, 340px); }
  #storyStageM .pay { width:min(94%, 300px); }
  #storyStageM .phone { width:26%; min-width:74px; }

  @media (prefers-reduced-motion: reduce) {
    .scene, .su-card, .browser, .site-hero, .phone, .pay-card, .pay-btn,
    .iris-blade, .iris-flash, .vf, .cam-info-inner, .sync-wire, .sync-dot { transition:none !important; }
    .ai-cursor { animation:none !important; }
  }

  /* ---------- Floating UI cards animation ---------- */
  @keyframes float1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
  @keyframes float2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(9px)} }
  .floaty1 { animation: float1 7s ease-in-out infinite; }
  .floaty2 { animation: float2 6s ease-in-out infinite; }

  /* ---------- Reduced motion ---------- */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal, .reveal-fade, .reveal-scale, .stagger > *, #heroHeadline { opacity: 1 !important; transform: none !important; transition: none !important; }
    .divider-draw { transform: scaleX(1) !important; transition: none !important; }
    .marquee-track, .floaty1, .floaty2 { animation: none !important; }
    .story-step { opacity: 1 !important; transform: none !important; }
    #heroBg, #heroMock { transform: none !important; }
  }

  /* ---------- Telegram assistant section ---------- */
  .tg-phone {
    background: linear-gradient(160deg, #1c1d22, #0a0a0b);
    border-radius: 42px;
    padding: 10px;
    box-shadow: 0 40px 90px -30px rgba(15,15,20,.55), inset 0 0 0 1.5px rgba(255,255,255,.06);
    position: relative;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
  .tg-screen {
    position: relative;
    border-radius: 34px;
    overflow: hidden;
    background: #cfdbea;
    height: 620px;
    display: flex;
    flex-direction: column;
  }
  .tg-notch {
    position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
    width: 116px; height: 26px; border-radius: 9999px; background: #0a0a0b; z-index: 30;
  }
  .tg-header {
    position: relative; z-index: 20;
    background: #517da2;
    color: #fff;
    padding: 38px 14px 12px;
    display: flex; align-items: center; gap: 11px;
  }
  .tg-header .tg-back { width: 22px; height: 22px; flex-shrink: 0; opacity: .95; }
  .tg-header .tg-menu { margin-left: auto; width: 20px; height: 20px; opacity: .9; flex-shrink: 0; }
  .tg-avatar {
    width: 38px; height: 38px; border-radius: 9999px; flex-shrink: 0;
    display: grid; place-items: center; color: #fff; font: 700 14px/1 "Inter", sans-serif;
    background: linear-gradient(135deg, #6fb1fc, #4364f7);
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
  }
  .tg-avatar.tg-av-owner { background: linear-gradient(135deg, #ff7a96, #ff385c); }
  .tg-title { font: 600 14.5px/1.1 "Inter", sans-serif; }
  .tg-status { font: 400 11.5px/1.2 "Inter", sans-serif; opacity: .85; margin-top: 2px; display: flex; align-items: center; gap: 5px; }
  .tg-bot-tag { background: rgba(255,255,255,.22); border-radius: 5px; padding: 1px 5px; font: 700 8.5px/1.3 "Inter", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
  .tg-chat {
    flex: 1; overflow: hidden; position: relative;
    padding: 14px 12px 8px;
    display: flex; flex-direction: column; gap: 8px;
    background-color: #99bbd4;
    background-image:
      radial-gradient(circle at 18% 22%, rgba(255,255,255,.10) 0 3px, transparent 4px),
      radial-gradient(circle at 72% 38%, rgba(255,255,255,.08) 0 4px, transparent 5px),
      radial-gradient(circle at 42% 68%, rgba(255,255,255,.07) 0 3px, transparent 4px),
      radial-gradient(circle at 88% 80%, rgba(255,255,255,.09) 0 3px, transparent 4px),
      radial-gradient(circle at 8% 90%, rgba(255,255,255,.06) 0 4px, transparent 5px),
      linear-gradient(160deg, #a7c6dd, #8fb2cf);
  }
  .tg-bubble {
    max-width: 80%; padding: 7px 11px 6px; border-radius: 15px;
    font: 400 12.8px/1.35 "Inter", sans-serif; color: #1b1c20;
    position: relative; box-shadow: 0 1px 1.5px rgba(0,0,0,.12);
    word-wrap: break-word;
  }
  .tg-bubble b { font-weight: 700; }
  .tg-bubble .tg-line { display: block; }
  .tg-in { align-self: flex-start; background: #fff; border-bottom-left-radius: 5px; }
  .tg-out { align-self: flex-end; background: #effdde; border-bottom-right-radius: 5px; }
  .tg-meta { display: inline-flex; align-items: center; gap: 3px; float: right; margin: 4px 0 -2px 8px; }
  .tg-time { font: 400 9.5px/1 "Inter", sans-serif; color: #8aa0ad; }
  .tg-out .tg-time { color: #5aab3a; }
  .tg-check { width: 15px; height: 9px; }
  .tg-check path { stroke: #4fae3a; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .tg-kb { align-self: flex-end; display: flex; gap: 6px; max-width: 80%; margin-top: -2px; }
  .tg-kb button {
    flex: 1; background: rgba(255,255,255,.92); color: #2b6fb0; border-radius: 11px;
    padding: 8px 10px; font: 600 11.5px/1 "Inter", sans-serif; box-shadow: 0 1px 1.5px rgba(0,0,0,.12);
    display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap;
  }
  .tg-typing { align-self: flex-start; background: #fff; border-bottom-left-radius: 5px; padding: 10px 13px; display: inline-flex; gap: 4px; border-radius: 15px; box-shadow: 0 1px 1.5px rgba(0,0,0,.12); }
  .tg-typing span { width: 6px; height: 6px; border-radius: 9999px; background: #9bb2c0; animation: tgdot 1.3s infinite ease-in-out; }
  .tg-typing span:nth-child(2) { animation-delay: .18s; }
  .tg-typing span:nth-child(3) { animation-delay: .36s; }
  @keyframes tgdot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
  .tg-input {
    background: #fff; padding: 9px 12px; display: flex; align-items: center; gap: 10px;
    border-top: 1px solid rgba(0,0,0,.05);
  }
  .tg-input .tg-clip { width: 20px; height: 20px; color: #98a6b3; flex-shrink: 0; }
  .tg-input .tg-field { flex: 1; font: 400 12.5px/1 "Inter", sans-serif; color: #9aa7b2; }
  .tg-send { width: 34px; height: 34px; border-radius: 9999px; background: #50a8eb; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 4px 10px -3px rgba(80,168,235,.6); }
  .tg-send svg { width: 17px; height: 17px; color: #fff; }
  @media (prefers-reduced-motion: reduce) { .tg-typing span { animation: none !important; } }

  /* ---------- Photo-shoot estimator (CSS-only looping mini-flow) ---------- */
  /* One 16s timeline drives a 4-step product demo. Each animated element keys
     off the same `psflow` duration so steps stay in sync. Step windows:
       0–22%  step 1 villa selected
       22–46% step 2 rooms/extras chips light up
       46–74% step 3 estimate price counts/fades in
       74–100% step 4 "Request sent" confirmation */
  .ps-card { width:100%; max-width:430px; margin:0 auto; background:#fff; border:1px solid #e3e2df;
    border-radius:24px; padding:22px 22px 24px; color:#1b1c20;
    box-shadow:0 30px 80px -28px rgba(15,15,20,.45); position:relative; overflow:hidden; }
  .ps-head { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
  .ps-dot { width:9px; height:9px; border-radius:9999px; background:#FF385C; box-shadow:0 0 0 4px rgba(255,56,92,.12); }
  .ps-head-t { font:600 13px/1 "Inter",sans-serif; color:#52535a; letter-spacing:.02em; }
  .ps-head-step { margin-left:auto; font:600 11px/1 "Inter",sans-serif; color:#9a9a9f; }
  .ps-label { font:600 11px/1 "Inter",sans-serif; color:#8a8a90; text-transform:uppercase; letter-spacing:.12em; margin-bottom:7px; }
  /* step 1 — villa row */
  .ps-villa { display:flex; align-items:center; gap:12px; padding:11px; border-radius:14px;
    border:1.5px solid #e3e2df; background:#fbfaf8; margin-bottom:16px;
    animation: psVilla 16s var(--ease) infinite; }
  .ps-villa-img { width:42px; height:42px; border-radius:10px; flex-shrink:0;
    background:linear-gradient(135deg,#9ec6e8,#5b86b3); position:relative; overflow:hidden; }
  .ps-villa-img::after { content:""; position:absolute; left:8px; bottom:7px; width:26px; height:10px;
    border-radius:5px 5px 0 0; background:rgba(255,255,255,.55); }
  .ps-villa-meta b { display:block; font:600 14px/1.2 "Inter",sans-serif; color:#1b1c20; }
  .ps-villa-meta span { font:400 11.5px/1.2 "Inter",sans-serif; color:#8a8a90; }
  .ps-villa-tick { margin-left:auto; width:22px; height:22px; border-radius:9999px; background:#17b26a;
    display:grid; place-items:center; opacity:0; transform:scale(.5);
    animation: psTick 16s var(--ease) infinite; }
  .ps-villa-tick svg { width:12px; height:12px; color:#fff; }
  /* step 2 — chips */
  .ps-chips { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
  .ps-chip { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:9999px;
    font:600 12px/1 "Inter",sans-serif; color:#6B6B70; background:#f3f2f0; border:1.5px solid #ececea;
    opacity:.55; transition:none; }
  .ps-chip svg { width:13px; height:13px; }
  .ps-chip.ps-c1 { animation: psChip 16s var(--ease) infinite; animation-delay:-0s; }
  .ps-chip.ps-c2 { animation: psChip 16s var(--ease) infinite; animation-delay:.18s; }
  .ps-chip.ps-c3 { animation: psChip 16s var(--ease) infinite; animation-delay:.36s; }
  .ps-chip.ps-c4 { animation: psChip 16s var(--ease) infinite; animation-delay:.54s; }
  /* lit state baked into keyframes via color/bg — handled in psChip */
  /* step 3 — estimate */
  .ps-estimate { border-top:1px solid #ececea; padding-top:16px; display:flex; align-items:center; justify-content:space-between; }
  .ps-est-l span { display:block; font:600 11px/1 "Inter",sans-serif; color:#9a9a9f; text-transform:uppercase; letter-spacing:.1em; }
  .ps-est-price { font:600 26px/1.05 "Fraunces",serif; color:#1b1c20; margin-top:5px;
    opacity:0; transform:translateY(8px); animation: psPrice 16s var(--ease) infinite; }
  .ps-est-price b { color:#FF385C; font-weight:600; }
  .ps-est-meta { font:400 11.5px/1.3 "Inter",sans-serif; color:#8a8a90; margin-top:3px;
    opacity:0; animation: psMeta 16s var(--ease) infinite; }
  .ps-send { flex-shrink:0; padding:11px 18px; border-radius:9999px; font:600 13px/1 "Inter",sans-serif;
    color:#fff; background:#FF385C; box-shadow:0 14px 30px -12px rgba(255,56,92,.6);
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
    animation: psSendBtn 16s var(--ease) infinite; }
  /* step 4 — confirmation overlay */
  .ps-confirm { position:absolute; inset:0; background:rgba(255,255,255,.97); display:flex;
    flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center;
    padding:24px; opacity:0; pointer-events:none; animation: psConfirm 16s var(--ease) infinite; }
  .ps-confirm-badge { width:52px; height:52px; border-radius:9999px; background:#ecfdf3; border:1px solid #abefc6;
    display:grid; place-items:center; transform:scale(.6); animation: psConfirmBadge 16s var(--ease) infinite; }
  .ps-confirm-badge svg { width:26px; height:26px; color:#17b26a; }
  .ps-confirm b { font:600 17px/1.2 "Fraunces",serif; color:#1b1c20; }
  .ps-confirm span { font:400 13px/1.4 "Inter",sans-serif; color:#6B6B70; max-width:240px; }

  @keyframes psVilla {
    0%,4% { border-color:#e3e2df; background:#fbfaf8; }
    8%,72% { border-color:#FF385C; background:#fff; }
    78%,100% { border-color:#e3e2df; background:#fbfaf8; }
  }
  @keyframes psTick {
    0%,8% { opacity:0; transform:scale(.5); }
    14%,72% { opacity:1; transform:scale(1); }
    78%,100% { opacity:0; transform:scale(.5); }
  }
  @keyframes psChip {
    0%,22% { opacity:.55; color:#6B6B70; background:#f3f2f0; border-color:#ececea; }
    30%,72% { opacity:1; color:#D81E47; background:#FFE9EE; border-color:#FFC2CF; }
    78%,100% { opacity:.55; color:#6B6B70; background:#f3f2f0; border-color:#ececea; }
  }
  @keyframes psPrice {
    0%,46% { opacity:0; transform:translateY(8px); }
    56%,72% { opacity:1; transform:translateY(0); }
    78%,100% { opacity:0; transform:translateY(8px); }
  }
  @keyframes psMeta {
    0%,50% { opacity:0; }
    60%,72% { opacity:1; }
    78%,100% { opacity:0; }
  }
  @keyframes psSendBtn {
    0%,46% { background:#cfd0d4; box-shadow:none; }
    56%,72% { background:#FF385C; box-shadow:0 14px 30px -12px rgba(255,56,92,.6); }
    73% { transform:scale(.95); }
    78%,100% { background:#cfd0d4; box-shadow:none; transform:scale(1); }
  }
  @keyframes psConfirm {
    0%,74% { opacity:0; }
    80%,96% { opacity:1; pointer-events:none; }
    100% { opacity:0; }
  }
  @keyframes psConfirmBadge {
    0%,74% { transform:scale(.6); }
    82%,96% { transform:scale(1); }
    100% { transform:scale(.6); }
  }
  .ps-glow { position:absolute; width:340px; height:340px; border-radius:9999px;
    background:radial-gradient(circle, rgba(255,56,92,.16), transparent 70%); filter:blur(20px);
    top:-120px; right:-100px; z-index:-1; }

  @media (prefers-reduced-motion: reduce) {
    .ps-villa, .ps-villa-tick, .ps-chip, .ps-est-price, .ps-est-meta, .ps-send,
    .ps-confirm, .ps-confirm-badge { animation: none !important; }
    /* show the resolved end-state (estimate visible, chips lit, request ready) */
    .ps-villa { border-color:#FF385C; background:#fff; }
    .ps-villa-tick { opacity:1; transform:scale(1); }
    .ps-chip { opacity:1; color:#D81E47; background:#FFE9EE; border-color:#FFC2CF; }
    .ps-est-price, .ps-est-meta { opacity:1; transform:none; }
    .ps-send { background:#FF385C; box-shadow:0 14px 30px -12px rgba(255,56,92,.6); }
    .ps-confirm { display:none; }
  }

  /* ---------- "Go live in 5 minutes" setup mini-flow (CSS-only, looping) ---------- */
  /* One shared 15s timeline (suFlow) drives a 3-step setup demo, staggered like
     watching the setup happen. Step windows on the master loop:
       0–30%   Step 1 — Airbnb URL types into the input + caret blinks
       30–66%  Step 2 — AI autofills name, meta, photo thumbs, SEO-score ring
       66–100% Step 3 — direct-booking site card + green "Published" check
     Every animated element keys off the same 15s duration so steps stay in sync.
     Each step also lifts/brightens as its turn comes round, then rests lit. */
  .setup-flow { position:relative; display:flex; flex-direction:column; gap:18px; }
  .setup-glow { position:absolute; width:360px; height:360px; border-radius:9999px;
    background:radial-gradient(circle, rgba(255,56,92,.18), transparent 70%); filter:blur(22px);
    top:-130px; right:-110px; z-index:-1; }
  /* a faint travelling connector that shows the flow moving top→bottom */
  .setup-rail { position:absolute; left:50%; top:8%; bottom:8%; width:2px; transform:translateX(-50%);
    background:linear-gradient(180deg, transparent, #ececea 12%, #ececea 88%, transparent); z-index:-1; }
  .setup-rail::after { content:""; position:absolute; left:-1px; width:4px; height:42px; border-radius:9999px;
    background:linear-gradient(180deg,#FF6B86,#FF385C); box-shadow:0 0 14px rgba(255,56,92,.6);
    animation: suRail 15s var(--ease) infinite; }
  .setup-step { position:relative; background:#fff; border:1px solid #e3e2df; border-radius:20px;
    padding:18px 18px 17px; color:#1b1c20; box-shadow:0 18px 50px -26px rgba(15,15,20,.4);
    transition:none; }
  .setup-step-head { display:flex; align-items:center; gap:10px; margin-bottom:13px; }
  .setup-num { width:25px; height:25px; border-radius:9999px; flex-shrink:0; display:grid; place-items:center;
    font:700 12px/1 "Inter",sans-serif; color:#fff; background:#cfd0d4; transition:none; }
  .setup-step-t { font:600 13px/1 "Inter",sans-serif; color:#52535a; letter-spacing:.01em; }
  .setup-step-state { margin-left:auto; display:inline-flex; align-items:center; gap:5px;
    font:600 10.5px/1 "Inter",sans-serif; color:#9a9a9f; }
  .setup-step-state .pip { width:6px; height:6px; border-radius:9999px; background:#cfd0d4; }
  /* per-step "active" pulse driven by the shared loop */
  .setup-step.s1 .setup-num { animation: suNum1 15s var(--ease) infinite; }
  .setup-step.s2 .setup-num { animation: suNum2 15s var(--ease) infinite; }
  .setup-step.s3 .setup-num { animation: suNum3 15s var(--ease) infinite; }

  /* ----- Step 1 — paste Airbnb link (URL types in) ----- */
  .su2-input { display:flex; align-items:center; gap:9px; height:42px; padding:0 13px; border-radius:12px;
    border:1.5px solid #e3e2df; background:#fbfaf8; animation: suInputBox 15s var(--ease) infinite; }
  .su2-input .lk { width:15px; height:15px; color:#9a9a9f; flex-shrink:0; }
  .su2-type { flex:1; min-width:0; display:inline-flex; align-items:center;
    font:500 13px/1 "Inter",sans-serif; color:#222328; white-space:nowrap; overflow:hidden; }
  .su2-url { display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:bottom;
    max-width:0; animation: suType 15s steps(28,end) infinite; }
  .su2-caret { width:1.5px; height:16px; background:#FF385C; margin-left:1px; flex-shrink:0;
    animation: suCaret 15s steps(1) infinite; }
  .su2-go { flex-shrink:0; height:30px; padding:0 13px; border-radius:9px; display:inline-flex; align-items:center; gap:6px;
    font:600 12px/1 "Inter",sans-serif; color:#fff; background:#cfd0d4; animation: suImportBtn 15s var(--ease) infinite; }
  .su2-go svg { width:13px; height:13px; }

  /* ----- Step 2 — AI autofills ----- */
  .su2-fill { display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; }
  .su2-meta { min-width:0; }
  .su2-name { font:600 16px/1.15 "Fraunces",serif; color:#1b1c20;
    opacity:0; transform:translateY(6px); animation: suName 15s var(--ease) infinite; }
  .su2-name .cur { display:inline-block; width:1.5px; height:14px; background:#FF385C; margin-left:2px; vertical-align:-1px;
    animation: suNameCur 15s steps(1) infinite; }
  .su2-spec { margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; }
  .su2-pill { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:9999px;
    font:600 11px/1 "Inter",sans-serif; color:#D81E47; background:#FFE9EE; border:1px solid #FFC2CF;
    opacity:0; transform:translateY(5px); }
  .su2-pill svg { width:12px; height:12px; }
  .su2-pill.f1 { animation: suPill 15s var(--ease) infinite; animation-delay:0s; }
  .su2-pill.f2 { animation: suPill 15s var(--ease) infinite; animation-delay:.18s; }
  .su2-thumbs { margin-top:11px; display:flex; gap:6px; }
  .su2-thumb { width:34px; height:26px; border-radius:7px; flex-shrink:0; position:relative; overflow:hidden;
    opacity:0; transform:scale(.6) translateY(6px); transform-origin:bottom center; }
  .su2-thumb::after { content:""; position:absolute; left:6px; bottom:5px; width:20px; height:7px;
    border-radius:4px 4px 0 0; background:rgba(255,255,255,.6); }
  .su2-thumb.t1 { background:linear-gradient(135deg,#9ec6e8,#5b86b3); animation: suThumb 15s var(--ease) infinite; animation-delay:0s; }
  .su2-thumb.t2 { background:linear-gradient(135deg,#a8d8c0,#4f9b78); animation: suThumb 15s var(--ease) infinite; animation-delay:.1s; }
  .su2-thumb.t3 { background:linear-gradient(135deg,#e8c79e,#c79256); animation: suThumb 15s var(--ease) infinite; animation-delay:.2s; }
  .su2-thumb.t4 { background:linear-gradient(135deg,#c4b5e8,#7c5fb3); animation: suThumb 15s var(--ease) infinite; animation-delay:.3s; }
  .su2-thumb.more { background:#f1f1f0; border:1px solid #ececea; display:grid; place-items:center;
    font:700 9px/1 "Inter",sans-serif; color:#8a8a90; animation: suThumb 15s var(--ease) infinite; animation-delay:.4s; }
  .su2-thumb.more::after { display:none; }
  /* SEO score ring */
  .su2-seo { position:relative; width:78px; height:78px; flex-shrink:0;
    opacity:0; transform:scale(.7); animation: suSeo 15s var(--ease) infinite; }
  .su2-seo svg { width:78px; height:78px; transform:rotate(-90deg); }
  .su2-seo .track { fill:none; stroke:#f1f1f0; stroke-width:7; }
  .su2-seo .arc { fill:none; stroke:url(#su2grad); stroke-width:7; stroke-linecap:round;
    stroke-dasharray:201; stroke-dashoffset:201; animation: suSeoArc 15s var(--ease) infinite; }
  .su2-seo .lbl { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .su2-seo .lbl b { font:600 21px/1 "Fraunces",serif; color:#1b1c20; }
  .su2-seo .lbl span { font:700 7.5px/1 "Inter",sans-serif; color:#9a9a9f; letter-spacing:.12em; text-transform:uppercase; margin-top:3px; }
  .su2-aibadge { display:inline-flex; align-items:center; gap:5px; margin-top:13px; padding:4px 10px; border-radius:9999px;
    background:#FFE9EE; border:1px solid #FFC2CF; color:#D81E47; font:700 9.5px/1 "Inter",sans-serif; letter-spacing:.06em; text-transform:uppercase;
    opacity:0; animation: suAiBadge 15s var(--ease) infinite; }
  .su2-aibadge svg { width:11px; height:11px; }

  /* ----- Step 3 — your live site ----- */
  .su2-site { border-radius:13px; overflow:hidden; border:1px solid #ececea; background:#fff;
    opacity:0; transform:translateY(10px); animation: suSite 15s var(--ease) infinite; }
  .su2-site-hero { position:relative; height:88px; padding:11px 13px; display:flex; flex-direction:column; justify-content:flex-end;
    color:#fff; background:linear-gradient(135deg,#7fb0e4,#3f6aae); }
  .su2-site-hero::before { content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.35)); }
  .su2-site-hero .nm { position:relative; font:600 15px/1 "Fraunces",serif; }
  .su2-site-hero .lo { position:relative; font:400 9.5px/1 "Inter",sans-serif; opacity:.92; margin-top:3px; }
  .su2-site-foot { display:flex; align-items:center; justify-content:space-between; padding:11px 13px; }
  .su2-site-foot .pr { font:600 14px/1 "Fraunces",serif; color:#1b1c20; }
  .su2-site-foot .pr small { font:400 9px/1 "Inter",sans-serif; color:#9a9a9f; }
  .su2-book { padding:8px 14px; border-radius:9999px; font:600 11px/1 "Inter",sans-serif; color:#fff; background:#FF385C;
    box-shadow:0 10px 24px -10px rgba(255,56,92,.65); animation: suBook 15s var(--ease) infinite; }
  .su2-published { display:inline-flex; align-items:center; gap:7px; margin-top:13px; padding:7px 14px; border-radius:9999px;
    background:#ecfdf3; border:1px solid #abefc6; color:#067647; font:700 11.5px/1 "Inter",sans-serif; letter-spacing:.02em;
    opacity:0; transform:translateY(6px) scale(.92); animation: suPublished 15s var(--ease) infinite; }
  .su2-published .ck { width:17px; height:17px; border-radius:9999px; background:#17b26a; display:grid; place-items:center; flex-shrink:0; }
  .su2-published .ck svg { width:10px; height:10px; color:#fff; }

  /* ----- Connect-everywhere chips (Airbnb auto-fills; others add as links) ----- */
  .su2-channels { margin-top:4px; padding-top:17px; border-top:1px dashed #e3e2df;
    opacity:0; transform:translateY(8px); animation: suChannels 15s var(--ease) infinite; }
  .su2-channels-t { font:600 10.5px/1 "Inter",sans-serif; color:#9a9a9f; letter-spacing:.08em; text-transform:uppercase; margin-bottom:11px; }
  .su2-chips { display:flex; flex-wrap:wrap; gap:8px; }
  .su2-chip { display:inline-flex; align-items:center; gap:7px; padding:6px 10px 6px 11px; border-radius:9999px;
    background:#fbfaf8; border:1px solid #e3e2df; font:600 12px/1 "Inter",sans-serif; color:#52535a; }
  .su2-chip .dot { width:6px; height:6px; border-radius:9999px; background:#c9cace; flex-shrink:0; }
  .su2-chip.is-auto { background:#FFF1F4; border-color:#FFC2CF; color:#1b1c20; }
  .su2-chip.is-auto .dot { background:#FF385C; }
  .su2-chip-tag { display:inline-flex; align-items:center; padding:3px 7px; border-radius:9999px;
    font:700 9px/1 "Inter",sans-serif; letter-spacing:.05em; text-transform:uppercase;
    background:#ececeb; color:#8a8a90; }
  .su2-chip-tag.auto { background:#FF385C; color:#fff; }

  /* ----- shared keyframes (master 15s loop) ----- */
  @keyframes suRail {
    0%,4% { top:8%; opacity:0; }
    8% { opacity:1; }
    33% { top:34%; }
    66% { top:62%; }
    92% { top:84%; opacity:1; }
    96%,100% { opacity:0; }
  }
  @keyframes suNum1 {
    0%,2% { background:#cfd0d4; }
    6%,30% { background:#FF385C; box-shadow:0 0 0 4px rgba(255,56,92,.14); }
    34%,100% { background:#17b26a; box-shadow:none; }
  }
  @keyframes suNum2 {
    0%,30% { background:#cfd0d4; }
    34%,64% { background:#FF385C; box-shadow:0 0 0 4px rgba(255,56,92,.14); }
    68%,100% { background:#17b26a; box-shadow:none; }
  }
  @keyframes suNum3 {
    0%,64% { background:#cfd0d4; }
    68%,94% { background:#FF385C; box-shadow:0 0 0 4px rgba(255,56,92,.14); }
    98%,100% { background:#17b26a; box-shadow:none; }
  }
  @keyframes suInputBox {
    0%,3% { border-color:#e3e2df; background:#fbfaf8; }
    7%,28% { border-color:#FF385C; background:#fff; }
    30%,100% { border-color:#abefc6; background:#fff; }
  }
  @keyframes suType {
    0%,4% { max-width:0; }
    26%,100% { max-width:24ch; }
  }
  @keyframes suCaret {
    0%,28% { opacity:1; }
    /* blink while typing, then hide once imported */
    4%,12%,20% { opacity:0; }
    30%,100% { opacity:0; }
  }
  @keyframes suImportBtn {
    0%,24% { background:#cfd0d4; }
    28%,30% { background:#FF385C; }
    31% { transform:scale(.94); }
    33%,100% { background:#FF385C; transform:scale(1); }
  }
  @keyframes suName {
    0%,33% { opacity:0; transform:translateY(6px); }
    40%,100% { opacity:1; transform:translateY(0); }
  }
  @keyframes suNameCur {
    0%,33% { opacity:0; }
    36%,44% { opacity:1; }
    46%,100% { opacity:0; }
  }
  @keyframes suPill {
    0%,40% { opacity:0; transform:translateY(5px); }
    47%,100% { opacity:1; transform:translateY(0); }
  }
  @keyframes suThumb {
    0%,44% { opacity:0; transform:scale(.6) translateY(6px); }
    52%,100% { opacity:1; transform:scale(1) translateY(0); }
  }
  @keyframes suSeo {
    0%,46% { opacity:0; transform:scale(.7); }
    54%,100% { opacity:1; transform:scale(1); }
  }
  @keyframes suSeoArc {
    0%,48% { stroke-dashoffset:201; }
    64%,100% { stroke-dashoffset:36; } /* ~82% of ring ≈ score 92 */
  }
  @keyframes suAiBadge {
    0%,40% { opacity:0; }
    50%,100% { opacity:1; }
  }
  @keyframes suSite {
    0%,66% { opacity:0; transform:translateY(10px); }
    74%,100% { opacity:1; transform:translateY(0); }
  }
  @keyframes suBook {
    0%,78% { transform:scale(1); box-shadow:0 10px 24px -10px rgba(255,56,92,.65); }
    84% { transform:scale(1.05); box-shadow:0 14px 30px -10px rgba(255,56,92,.8); }
    90%,100% { transform:scale(1); box-shadow:0 10px 24px -10px rgba(255,56,92,.65); }
  }
  @keyframes suPublished {
    0%,80% { opacity:0; transform:translateY(6px) scale(.92); }
    88%,100% { opacity:1; transform:translateY(0) scale(1); }
  }
  @keyframes suChannels {
    0%,86% { opacity:0; transform:translateY(8px); }
    94%,100% { opacity:1; transform:translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .setup-rail::after,
    .setup-step.s1 .setup-num, .setup-step.s2 .setup-num, .setup-step.s3 .setup-num,
    .su2-input, .su2-url, .su2-caret, .su2-go, .su2-name, .su2-name .cur, .su2-pill,
    .su2-thumb, .su2-seo, .su2-seo .arc, .su2-aibadge, .su2-site, .su2-book, .su2-published, .su2-channels {
      animation: none !important; }
    /* resolve every step to its finished, lit end-state */
    .setup-rail::after { display:none; }
    .setup-num { background:#17b26a !important; box-shadow:none !important; }
    .su2-input { border-color:#abefc6; background:#fff; }
    .su2-url { max-width:24ch; }
    .su2-caret { display:none; }
    .su2-go { background:#FF385C; }
    .su2-name { opacity:1; transform:none; }
    .su2-name .cur { display:none; }
    .su2-pill, .su2-aibadge, .su2-site, .su2-published, .su2-channels { opacity:1; transform:none; }
    .su2-thumb { opacity:1; transform:none; }
    .su2-seo { opacity:1; transform:none; }
    .su2-seo .arc { stroke-dashoffset:36; }
  }

  /* ---------- Market Intelligence: cinematic zoom-from-space map (CSS-only) ---------- */
  .mkt-stage { position:relative; width:100%; max-width:520px; margin:0 auto; aspect-ratio:1/1;
    border-radius:26px; overflow:hidden; border:1px solid #2a2c33;
    box-shadow:0 40px 100px -30px rgba(10,12,20,.6), inset 0 0 0 1px rgba(255,255,255,.04); }
  /* the zooming "world" layer — everything inside descends from space */
  .mkt-world { position:absolute; inset:0; transform:scale(1.4); transform-origin:52% 46%;
    animation: mktZoom 18s var(--ease) infinite; }
  /* stylized Kalkan coast: sea gradient + headland landforms */
  .mkt-map { position:absolute; inset:0;
    background:
      radial-gradient(120% 90% at 50% 110%, #0c5a6e 0%, #0e6f86 28%, #1390aa 55%, #2bb6cf 100%);
  }
  .mkt-map::before { /* main landmass (coast curving from top-left) */
    content:""; position:absolute; left:-12%; top:-14%; width:86%; height:74%;
    background:linear-gradient(150deg,#1f3d2e,#2c5a3f 55%,#3a7050);
    border-radius:0 0 60% 38% / 0 0 48% 70%;
    box-shadow:inset -18px -22px 50px rgba(0,0,0,.32); }
  .mkt-map::after { /* lower-right headland/peninsula */
    content:""; position:absolute; right:-16%; bottom:-18%; width:62%; height:56%;
    background:linear-gradient(330deg,#234433,#356a4b);
    border-radius:55% 40% 0 0 / 60% 46% 0 0;
    box-shadow:inset 18px 18px 46px rgba(0,0,0,.3); }
  /* a couple of soft beach/town glows + a tiny isle for texture */
  .mkt-glow { position:absolute; border-radius:9999px; pointer-events:none; }
  .mkt-glow.g1 { width:120px; height:120px; left:30%; top:30%;
    background:radial-gradient(circle, rgba(255,240,200,.20), transparent 70%); }
  .mkt-glow.g2 { width:46px; height:30px; right:24%; top:60%;
    background:linear-gradient(140deg,#2c5a3f,#3a7050); border-radius:50%; opacity:.9;
    box-shadow:inset -4px -5px 12px rgba(0,0,0,.3); }
  /* subtle lat/long grid to read as "satellite" */
  .mkt-grid { position:absolute; inset:0; opacity:.14;
    background-image:linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
    background-size:48px 48px; }
  /* growing coverage radius — rausch, centered on "your villa" */
  .mkt-radius { position:absolute; left:52%; top:46%; width:300px; height:300px;
    margin:-150px 0 0 -150px; border-radius:9999px;
    border:2px solid rgba(255,56,92,.85);
    background:radial-gradient(circle, rgba(255,56,92,.22), rgba(255,56,92,.06) 60%, transparent 72%);
    box-shadow:0 0 40px rgba(255,56,92,.35);
    transform:scale(0); transform-origin:center;
    animation: mktRadius 18s var(--ease) infinite; }
  .mkt-radius::after { /* faint outer pulse ring */
    content:""; position:absolute; inset:-2px; border-radius:9999px;
    border:1px solid rgba(255,56,92,.4); }
  /* your villa — center marker */
  .mkt-me { position:absolute; left:52%; top:46%; width:16px; height:16px; margin:-8px 0 0 -8px;
    border-radius:9999px; background:#fff; border:3px solid #FF385C; z-index:4;
    box-shadow:0 0 0 6px rgba(255,56,92,.25), 0 6px 14px rgba(0,0,0,.35);
    opacity:0; transform:scale(.4); animation: mktMe 18s var(--ease) infinite; }
  /* comparable villa pins (price teardrops) */
  .mkt-pin { position:absolute; z-index:5; display:flex; flex-direction:column; align-items:center;
    opacity:0; transform:translateY(8px) scale(.6); transform-origin:50% 100%; }
  .mkt-pin .tag { font:700 11.5px/1 "Inter",sans-serif; color:#1b1c20; background:#fff;
    padding:5px 9px; border-radius:9999px; white-space:nowrap;
    box-shadow:0 8px 18px -6px rgba(0,0,0,.5); border:1px solid rgba(0,0,0,.06); }
  .mkt-pin .stalk { width:2px; height:9px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.4); }
  .mkt-pin .dot { width:9px; height:9px; border-radius:9999px; background:#FF385C;
    box-shadow:0 0 0 3px rgba(255,255,255,.9), 0 3px 8px rgba(0,0,0,.4); }
  .mkt-pin.p1 { left:30%; top:30%; animation: mktPin 18s var(--ease) infinite; animation-delay:0s; }
  .mkt-pin.p2 { left:70%; top:36%; animation: mktPin 18s var(--ease) infinite; animation-delay:.5s; }
  .mkt-pin.p3 { left:34%; top:62%; animation: mktPin 18s var(--ease) infinite; animation-delay:1s; }
  .mkt-pin.p4 { left:66%; top:64%; animation: mktPin 18s var(--ease) infinite; animation-delay:1.5s; }
  .mkt-pin.p5 { left:50%; top:24%; animation: mktPin 18s var(--ease) infinite; animation-delay:2s; }
  /* fixed (non-zooming) overlay badges on the stage */
  .mkt-scan { position:absolute; left:14px; bottom:14px; z-index:8;
    display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:9999px;
    background:rgba(12,14,20,.62); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.12);
    font:600 11.5px/1 "Inter",sans-serif; color:#fff; letter-spacing:.02em; }
  .mkt-scan .live { width:7px; height:7px; border-radius:9999px; background:#FF385C;
    box-shadow:0 0 0 0 rgba(255,56,92,.6); animation: mktLive 2.4s var(--ease) infinite; }
  .mkt-zoomlbl { position:absolute; right:14px; top:14px; z-index:8;
    padding:6px 11px; border-radius:9999px; background:rgba(12,14,20,.62); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.12); font:600 11px/1 "Inter",sans-serif; color:#cfe9f2;
    letter-spacing:.06em; text-transform:uppercase; }
  /* keyframes */
  @keyframes mktZoom {
    0% { transform:scale(1.4); }
    36%,82% { transform:scale(1); }
    100% { transform:scale(1.4); }
  }
  @keyframes mktRadius {
    0%,18% { transform:scale(0); opacity:0; }
    30% { opacity:1; }
    50%,82% { transform:scale(1); opacity:1; }
    100% { transform:scale(0); opacity:0; }
  }
  @keyframes mktMe {
    0%,20% { opacity:0; transform:scale(.4); }
    30%,82% { opacity:1; transform:scale(1); }
    100% { opacity:0; transform:scale(.4); }
  }
  @keyframes mktPin {
    0%,30% { opacity:0; transform:translateY(8px) scale(.6); }
    40%,82% { opacity:1; transform:translateY(0) scale(1); }
    100% { opacity:0; transform:translateY(8px) scale(.6); }
  }
  @keyframes mktLive { 0%,100%{ box-shadow:0 0 0 0 rgba(255,56,92,.6);} 50%{ box-shadow:0 0 0 6px rgba(255,56,92,0);} }

  /* comparable-villas side card */
  .mkt-list { width:100%; max-width:430px; margin:0 auto; background:#fff; border:1px solid #e3e2df;
    border-radius:22px; padding:18px 18px 16px; box-shadow:0 30px 80px -30px rgba(15,15,20,.4); }
  .mkt-list-head { display:flex; align-items:center; gap:9px; margin-bottom:14px; }
  .mkt-list-head .ic { width:30px; height:30px; border-radius:9px; flex-shrink:0; display:grid; place-items:center;
    background:#FFE9EE; color:#FF385C; }
  .mkt-list-head .ic svg { width:16px; height:16px; }
  .mkt-list-head b { font:600 14px/1.15 "Inter",sans-serif; color:#1b1c20; display:block; }
  .mkt-list-head span { font:400 11.5px/1.2 "Inter",sans-serif; color:#8a8a90; }
  .mkt-comp { display:flex; align-items:center; gap:11px; padding:10px 4px; border-top:1px solid #f0efec; }
  .mkt-comp:first-of-type { border-top:none; }
  .mkt-comp .img { width:38px; height:38px; border-radius:10px; flex-shrink:0; overflow:hidden;
    background:linear-gradient(135deg,#9ec6e8,#5b86b3); position:relative; }
  .mkt-comp .img.b { background:linear-gradient(135deg,#a8d8c0,#4f9b78); }
  .mkt-comp .img.c { background:linear-gradient(135deg,#e8c79e,#c79256); }
  .mkt-comp .img.d { background:linear-gradient(135deg,#c4b5e8,#7c5fb3); }
  .mkt-comp .img::after { content:""; position:absolute; left:7px; bottom:6px; width:24px; height:9px;
    border-radius:5px 5px 0 0; background:rgba(255,255,255,.55); }
  .mkt-comp .meta { min-width:0; }
  .mkt-comp .meta b { display:block; font:600 13px/1.2 "Inter",sans-serif; color:#1b1c20; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mkt-comp .meta span { font:400 11.5px/1.2 "Inter",sans-serif; color:#8a8a90; }
  .mkt-comp .price { margin-left:auto; text-align:right; flex-shrink:0; }
  .mkt-comp .price b { display:block; font:600 14.5px/1 "Inter",sans-serif; color:#1b1c20; }
  .mkt-comp .price span { font:400 10.5px/1.2 "Inter",sans-serif; color:#b3b3b8; }
  .mkt-advice { margin-top:14px; border-radius:14px; padding:12px 13px;
    background:linear-gradient(150deg,#fff5f7,#fff); border:1px solid #FFC2CF;
    display:flex; align-items:flex-start; gap:10px; }
  .mkt-advice .ai { width:26px; height:26px; border-radius:8px; flex-shrink:0; display:grid; place-items:center;
    background:#FF385C; color:#fff; }
  .mkt-advice .ai svg { width:14px; height:14px; }
  .mkt-advice p { font:400 12.5px/1.45 "Inter",sans-serif; color:#5a3a44; margin:0; }
  .mkt-advice p b { color:#D81E47; font-weight:600; }

  @media (prefers-reduced-motion: reduce) {
    /* resolve to the descended, fully-revealed end-state — no motion */
    .mkt-world { animation:none !important; transform:scale(1) !important; }
    .mkt-radius { animation:none !important; transform:scale(1) !important; opacity:1 !important; }
    .mkt-me { animation:none !important; opacity:1 !important; transform:scale(1) !important; }
    .mkt-pin { animation:none !important; opacity:1 !important; transform:none !important; }
    .mkt-scan .live { animation:none !important; }
  }
  @media (max-width:420px){ .mkt-pin .tag { font-size:10.5px; padding:4px 7px; } }

  /* ---------- Accounting & reports mini dashboard (CSS-only, on-brand) ---------- */
  .acc-card { width:100%; max-width:460px; margin:0 auto; background:#fff; border:1px solid #e3e2df;
    border-radius:24px; padding:22px 22px 24px; color:#1b1c20;
    box-shadow:0 30px 80px -28px rgba(15,15,20,.45); position:relative; overflow:hidden; }
  .acc-glow { position:absolute; width:340px; height:340px; border-radius:9999px;
    background:radial-gradient(circle, rgba(23,178,106,.18), transparent 70%); filter:blur(22px);
    top:-130px; left:-110px; z-index:-1; }
  .acc-head { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
  .acc-dot { width:9px; height:9px; border-radius:9999px; background:#17b26a; box-shadow:0 0 0 4px rgba(23,178,106,.14); }
  .acc-head-t { font:600 13px/1 "Inter",sans-serif; color:#52535a; letter-spacing:.02em; }
  .acc-head-tag { margin-left:auto; display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:9999px;
    background:#ecfdf3; border:1px solid #abefc6; color:#067647; font:700 10px/1 "Inter",sans-serif; letter-spacing:.06em; text-transform:uppercase; }
  /* stat trio */
  .acc-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; }
  .acc-stat { border:1px solid #ececea; border-radius:15px; padding:12px 13px; background:#fbfaf8; }
  .acc-stat .lbl { display:flex; align-items:center; gap:6px; font:600 10.5px/1 "Inter",sans-serif; color:#9a9a9f; text-transform:uppercase; letter-spacing:.08em; }
  .acc-stat .lbl svg { width:12px; height:12px; }
  .acc-stat .val { font:600 21px/1.05 "Fraunces",serif; color:#1b1c20; margin-top:9px; }
  .acc-stat.is-income .lbl { color:#067647; }
  .acc-stat.is-expense .lbl { color:#b54708; }
  .acc-stat.is-profit { background:linear-gradient(150deg,#fff5f7,#fff); border-color:#FFC2CF; }
  .acc-stat.is-profit .lbl { color:#D81E47; }
  .acc-stat.is-profit .val { color:#D81E47; }
  .acc-margin { display:inline-flex; align-items:center; gap:4px; margin-top:6px; padding:2px 8px; border-radius:9999px;
    background:#FFE9EE; border:1px solid #FFC2CF; color:#D81E47; font:700 10px/1.4 "Inter",sans-serif; }
  /* bar mini-chart */
  .acc-chart { display:flex; align-items:flex-end; gap:7px; height:52px; padding:0 2px 0; margin-bottom:6px; }
  .acc-bar { flex:1; border-radius:6px 6px 3px 3px; background:linear-gradient(180deg,#FF6B86,#FF385C); opacity:.92; }
  .acc-bar.muted { background:#e7e6e3; }
  .acc-chart-x { display:flex; gap:7px; margin-bottom:18px; }
  .acc-chart-x span { flex:1; text-align:center; font:600 9px/1 "Inter",sans-serif; color:#b3b3b8; }
  /* ledger rows */
  .acc-rows { border-top:1px solid #ececea; padding-top:12px; display:flex; flex-direction:column; gap:9px; }
  .acc-row { display:flex; align-items:center; gap:11px; }
  .acc-ic { width:30px; height:30px; border-radius:9px; flex-shrink:0; display:grid; place-items:center; }
  .acc-ic svg { width:15px; height:15px; }
  .acc-ic.in { background:#ecfdf3; color:#17b26a; }
  .acc-ic.out { background:#fef0e6; color:#e07c20; }
  .acc-row-meta { min-width:0; }
  .acc-row-meta b { display:block; font:600 13px/1.2 "Inter",sans-serif; color:#1b1c20; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .acc-row-meta span { font:400 11px/1.2 "Inter",sans-serif; color:#8a8a90; }
  .acc-amt { margin-left:auto; font:600 13.5px/1 "Inter",sans-serif; white-space:nowrap; }
  .acc-amt.pos { color:#067647; }
  .acc-amt.neg { color:#b54708; }
  @media (max-width:380px){ .acc-stat .val { font-size:18px; } }

  /* ---------- Guest registration / KBS (dark section, CSS-only) ---------- */
  /* Three-step flow card: Snap the ID -> AI reads it -> Filed with KBS.
     Lives on the dark (bg-ink) section, so surfaces are translucent white. */
  .kbs-flow { display:grid; gap:14px; grid-template-columns:1fr; }
  @media (min-width:560px){ .kbs-flow { grid-template-columns:repeat(3,1fr); align-items:stretch; } }
  .kbs-step { position:relative; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
    border-radius:20px; padding:20px 18px 18px; display:flex; flex-direction:column;
    box-shadow:0 24px 60px -34px rgba(0,0,0,.7); }
  .kbs-step-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
  .kbs-num { width:26px; height:26px; border-radius:9999px; flex-shrink:0; display:grid; place-items:center;
    background:#FF385C; color:#fff; font:700 13px/1 "Inter",sans-serif;
    box-shadow:0 8px 20px -8px rgba(255,56,92,.8); }
  .kbs-step-t { font:600 12px/1.1 "Inter",sans-serif; color:rgba(255,255,255,.62);
    text-transform:uppercase; letter-spacing:.1em; }
  .kbs-step-icon { width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
    background:rgba(255,56,92,.14); border:1px solid rgba(255,56,92,.3); color:#ff8ba0; margin-bottom:13px; }
  .kbs-step-icon svg { width:23px; height:23px; }
  .kbs-step h3 { font:600 18px/1.15 "Fraunces",serif; color:#fff; letter-spacing:-.01em; }
  .kbs-step p { margin-top:7px; font:400 13.5px/1.5 "Inter",sans-serif; color:rgba(255,255,255,.66); }
  /* connector arrow between steps (desktop only) */
  .kbs-step::after { content:""; display:none; }
  @media (min-width:560px){
    .kbs-step:not(:last-child)::after {
      content:""; display:block; position:absolute; top:50%; right:-19px; width:14px; height:14px;
      transform:translateY(-50%) rotate(45deg); z-index:2;
      border-top:2px solid rgba(255,56,92,.55); border-right:2px solid rgba(255,56,92,.55);
      border-radius:2px;
    }
  }
  /* passport-scan visual card */
  .kbs-scan { position:relative; width:100%; max-width:420px; margin:0 auto;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
    border-radius:24px; padding:22px; box-shadow:0 36px 90px -34px rgba(0,0,0,.75); overflow:hidden; }
  .kbs-scan-glow { position:absolute; width:300px; height:300px; border-radius:9999px;
    background:radial-gradient(circle, rgba(255,56,92,.28), transparent 70%); filter:blur(20px);
    top:-120px; right:-90px; z-index:0; pointer-events:none; }
  .kbs-scan-head { position:relative; z-index:1; display:flex; align-items:center; gap:10px; margin-bottom:16px; }
  .kbs-scan-dot { width:9px; height:9px; border-radius:9999px; background:#FF385C; box-shadow:0 0 0 4px rgba(255,56,92,.2); }
  .kbs-scan-head-t { font:600 13px/1 "Inter",sans-serif; color:rgba(255,255,255,.7); letter-spacing:.02em; }
  .kbs-scan-head-tag { margin-left:auto; display:inline-flex; align-items:center; gap:5px; padding:4px 10px;
    border-radius:9999px; background:rgba(124,92,255,.16); border:1px solid rgba(124,92,255,.4);
    color:#c4b6ff; font:700 10px/1 "Inter",sans-serif; letter-spacing:.06em; text-transform:uppercase; }
  /* the ID document with scan line */
  .kbs-doc { position:relative; z-index:1; border-radius:16px; padding:15px 16px; overflow:hidden;
    background:linear-gradient(150deg,#2a2d39,#1a1c24); border:1px solid rgba(255,255,255,.14); }
  .kbs-doc-top { display:flex; align-items:center; gap:12px; }
  .kbs-doc-photo { width:46px; height:56px; border-radius:8px; flex-shrink:0;
    background:linear-gradient(160deg,#6478a0,#3c4a66); }
  .kbs-doc-lines { flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
  .kbs-doc-line { height:8px; border-radius:4px; background:rgba(255,255,255,.16); }
  .kbs-doc-line.w70 { width:70%; } .kbs-doc-line.w90 { width:90%; } .kbs-doc-line.w50 { width:50%; }
  .kbs-doc-flag { margin-left:auto; font:700 9px/1 "Inter",sans-serif; letter-spacing:.1em;
    color:rgba(255,255,255,.5); align-self:flex-start; }
  .kbs-doc-mrz { margin-top:14px; display:flex; flex-direction:column; gap:5px; }
  .kbs-doc-mrz span { height:7px; border-radius:3px;
    background:repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 6px, transparent 6px 11px); }
  .kbs-doc-mrz span:last-child { width:82%; }
  .kbs-scanline { position:absolute; left:0; right:0; height:34px; z-index:2; pointer-events:none;
    background:linear-gradient(180deg, transparent, rgba(255,56,92,.16) 45%, rgba(255,56,92,.5) 50%, rgba(255,56,92,.16) 55%, transparent);
    box-shadow:0 0 22px 2px rgba(255,56,92,.4);
    animation: kbsScan 3.4s var(--ease) infinite; }
  @keyframes kbsScan { 0%{ top:-10%; opacity:0;} 12%{opacity:1;} 88%{opacity:1;} 100%{ top:100%; opacity:0;} }
  /* extracted fields below the doc */
  .kbs-fields { position:relative; z-index:1; margin-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  .kbs-field { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
    border-radius:11px; padding:9px 11px; }
  .kbs-field .k { font:600 9px/1 "Inter",sans-serif; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.42); }
  .kbs-field .v { margin-top:5px; font:600 13px/1.1 "Inter",sans-serif; color:#fff;
    display:flex; align-items:center; gap:6px; }
  .kbs-field .v svg { width:12px; height:12px; color:#34d399; flex-shrink:0; }
  .kbs-field.full { grid-column:1 / -1; }
  /* filed confirmation bar */
  .kbs-filed { position:relative; z-index:1; margin-top:14px; display:flex; align-items:center; gap:11px;
    padding:12px 14px; border-radius:13px; background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.32); }
  .kbs-filed-badge { width:30px; height:30px; border-radius:9999px; flex-shrink:0; display:grid; place-items:center;
    background:#34d399; color:#06251a; }
  .kbs-filed-badge svg { width:17px; height:17px; }
  .kbs-filed b { display:block; font:600 13.5px/1.2 "Inter",sans-serif; color:#fff; }
  .kbs-filed span { font:400 11.5px/1.3 "Inter",sans-serif; color:rgba(255,255,255,.6); }
  @media (prefers-reduced-motion: reduce){
    .kbs-scanline { animation:none !important; top:46% !important; opacity:.7 !important; }
  }
  @media (max-width:380px){ .kbs-fields { grid-template-columns:1fr; } }

  /* ---------- Newsletter ---------- */
  .nl-input { transition:border-color .25s var(--ease), box-shadow .25s var(--ease); }
  .nl-input:focus { outline:none; border-color:#FF385C; box-shadow:0 0 0 4px rgba(255,56,92,.14); }
  .nl-input.nl-invalid { border-color:#e11d48; box-shadow:0 0 0 4px rgba(225,29,72,.14); }
  .nl-ok { display:none; }
  .nl-done .nl-form { display:none; }
  .nl-done .nl-ok { display:flex; }
  @media (prefers-reduced-motion: reduce){ .nl-input { transition:none !important; } }

  /* ---------- Template showcase: per-theme populated mock villa pages ---------- */
  /* Each card is a fixed-height "browser window" frame; the tall inner mock page
     sits at the top and slowly translateY-scrolls up on hover, easing back on leave. */
  .tpl-frame {
    position: relative;
    height: 360px;                 /* the visible "window" height */
    overflow: hidden;
    border-radius: 0 0 inherit inherit;
    background: var(--tpl-bg, #fff);
  }
  .tpl-page {
    /* tall stacked mock page; translateY animates the auto-scroll */
    transform: translateY(0);
    transition: transform 4.2s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
    font-family: var(--tpl-font, "Inter", sans-serif);
    color: var(--tpl-text, #1b1c20);
    background: var(--tpl-bg, #fff);
  }
  /* hover (and keyboard focus) drives the slow scroll to the bottom of the page */
  .tpl-card:hover .tpl-page,
  .tpl-card:focus-visible .tpl-page,
  .tpl-card:focus-within .tpl-page {
    /* page is ~760px tall, frame 360px -> reveal the remaining ~400px */
    transform: translateY(-400px);
  }
  /* soft fade at the bottom edge of the window so content scrolls in elegantly */
  .tpl-frame::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 34px;
    background: linear-gradient(to top, var(--tpl-fade, rgba(255,255,255,.9)), transparent);
    pointer-events: none; z-index: 4;
  }
  /* browser chrome bar sitting above the frame */
  .tpl-chrome {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    background: var(--tpl-chrome-bg, #fff);
    color: var(--tpl-chrome-text, #222);
  }
  .tpl-chrome .dot { width: 9px; height: 9px; border-radius: 9999px; }
  .tpl-url {
    margin-left: 6px; flex: 1; min-width: 0;
    font: 500 11px/1 "Inter", sans-serif;
    padding: 5px 10px; border-radius: 9999px;
    background: rgba(0,0,0,.05); color: inherit;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: .85;
  }

  /* --- mini mock-page sections (themable via CSS vars on .tpl-page) --- */
  .tpl-hero { position: relative; height: 188px; overflow: hidden; }
  .tpl-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tpl-hero .ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.04) 55%, transparent); }
  .tpl-hero .cap { position: absolute; left: 16px; bottom: 14px; right: 16px; color: #fff; z-index: 2; }
  .tpl-hero .loc { font: 600 9.5px/1 "Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
  .tpl-hero .nm  { font-family: var(--tpl-font); font-weight: var(--tpl-head-wt, 600); font-size: 26px; line-height: 1.02; margin-top: 6px; letter-spacing: var(--tpl-head-ls, -.01em); }
  .tpl-hero .badge { position: absolute; top: 14px; left: 16px; z-index: 2; padding: 4px 11px; border-radius: var(--tpl-pill, 9999px); background: var(--tpl-accent); color: var(--tpl-on-accent, #fff); font: 700 9.5px/1 "Inter", sans-serif; letter-spacing: .06em; }

  .tpl-body { padding: 16px; }
  .tpl-tag { font: 600 9px/1 "Inter", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--tpl-accent); }
  .tpl-lead { font-family: var(--tpl-font); font-weight: var(--tpl-head-wt, 600); font-size: 16px; line-height: 1.2; margin: 7px 0 4px; letter-spacing: var(--tpl-head-ls, -.01em); }
  .tpl-copy { font: 400 11px/1.55 "Inter", sans-serif; color: var(--tpl-muted, #6b6b72); }

  /* specs row */
  .tpl-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 13px; }
  .tpl-spec { border: 1px solid var(--tpl-line, rgba(0,0,0,.09)); border-radius: var(--tpl-card-r, 12px); padding: 9px 6px; text-align: center; background: var(--tpl-soft, transparent); }
  .tpl-spec .n { font-family: var(--tpl-font); font-weight: 600; font-size: 14px; color: var(--tpl-text); }
  .tpl-spec .l { font: 500 8px/1.2 "Inter", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--tpl-muted, #8a8a90); margin-top: 3px; }

  /* gallery strip */
  .tpl-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 6px; margin-top: 13px; height: 72px; }
  .tpl-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--tpl-img-r, 10px); display: block; }

  /* price line */
  .tpl-priceline { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--tpl-line, rgba(0,0,0,.09)); }
  .tpl-price { font-family: var(--tpl-font); font-weight: var(--tpl-head-wt, 600); font-size: 18px; color: var(--tpl-text); }
  .tpl-price small { font: 500 10px/1 "Inter", sans-serif; color: var(--tpl-muted, #8a8a90); font-weight: 500; }
  .tpl-cta { padding: 7px 14px; border-radius: var(--tpl-pill, 9999px); background: var(--tpl-accent); color: var(--tpl-on-accent, #fff); font: 700 10px/1 "Inter", sans-serif; }

  /* availability calendar */
  .tpl-cal { margin-top: 16px; border: 1px solid var(--tpl-line, rgba(0,0,0,.09)); border-radius: var(--tpl-card-r, 14px); padding: 12px; background: var(--tpl-soft, transparent); }
  .tpl-cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
  .tpl-cal-h .mo { font-family: var(--tpl-font); font-weight: 600; font-size: 12.5px; color: var(--tpl-text); }
  .tpl-cal-h .nav { display: flex; gap: 5px; color: var(--tpl-muted, #9a9aa0); font: 600 12px/1 "Inter"; }
  .tpl-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 4px; }
  .tpl-dow span { text-align: center; font: 600 7.5px/1 "Inter", sans-serif; letter-spacing: .04em; color: var(--tpl-muted, #9a9aa0); text-transform: uppercase; }
  .tpl-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
  .tpl-day { aspect-ratio: 1/1; display: grid; place-items: center; font: 500 9px/1 "Inter", sans-serif; border-radius: var(--tpl-day-r, 7px); color: var(--tpl-text); }
  .tpl-day.free { background: var(--tpl-day-free, rgba(0,0,0,.035)); }
  .tpl-day.booked { background: var(--tpl-accent); color: var(--tpl-on-accent, #fff); font-weight: 700; }
  .tpl-day.blocked { background: var(--tpl-blocked, repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 3px, rgba(0,0,0,.02) 3px 6px)); color: var(--tpl-muted, #9a9aa0); }
  .tpl-day.empty { background: transparent; }
  .tpl-cal-legend { display: flex; gap: 12px; margin-top: 9px; }
  .tpl-cal-legend span { display: inline-flex; align-items: center; gap: 4px; font: 500 8px/1 "Inter", sans-serif; color: var(--tpl-muted, #8a8a90); }
  .tpl-cal-legend i { width: 8px; height: 8px; border-radius: 3px; display: inline-block; }

  /* footer strip of the mock page */
  .tpl-foot { padding: 13px 16px; margin-top: 6px; background: var(--tpl-foot-bg, rgba(0,0,0,.03)); display: flex; align-items: center; justify-content: space-between; }
  .tpl-foot .lg { font-family: var(--tpl-font); font-weight: 600; font-size: 12px; color: var(--tpl-text); }
  .tpl-foot .mn { font: 500 8.5px/1 "Inter", sans-serif; color: var(--tpl-muted, #9a9aa0); letter-spacing: .04em; }

  /* "showcase only" hint that appears on hover so it's clearly not a live booking */
  .tpl-demo-flag {
    position: absolute; top: 50px; right: 12px; z-index: 5;
    padding: 4px 9px; border-radius: 9999px;
    background: rgba(17,17,19,.82); color: #fff;
    font: 600 8.5px/1 "Inter", sans-serif; letter-spacing: .05em;
    opacity: 0; transform: translateY(-4px);
    transition: opacity .35s var(--ease), transform .35s var(--ease);
    pointer-events: none; backdrop-filter: blur(4px);
  }
  .tpl-card:hover .tpl-demo-flag,
  .tpl-card:focus-within .tpl-demo-flag { opacity: 1; transform: translateY(0); }

  /* reduced-motion: no auto-scroll, no transitions — show a static top-of-page frame */
  @media (prefers-reduced-motion: reduce) {
    .tpl-page { transition: none !important; }
    .tpl-card:hover .tpl-page,
    .tpl-card:focus-visible .tpl-page,
    .tpl-card:focus-within .tpl-page { transform: translateY(0) !important; }
    .tpl-demo-flag { transition: none !important; }
  }
  /* mobile: keep auto-scroll hover-only (touch shows the top); cards already reflow via grid */

/* =====================================================================
   SHARED MULTI-PAGE HEADER / NAV / FOOTER  (added for the new IA)
   The original single-page site used in-page anchor links with no
   dropdown and no mobile menu. These styles add a Product dropdown
   (desktop hover/focus) and a slide-in mobile menu (hamburger),
   while reusing the existing #nav scroll-theme classes above.
   ===================================================================== */

/* --- Product dropdown (desktop) --- */
.vp-nav-item { position: relative; }
.vp-dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 270px; padding: 8px; margin-top: 6px;
  background: #fff; border: 1px solid var(--vp-line, #E7E7E9); border-radius: 18px;
  box-shadow: 0 24px 70px -24px rgba(15,15,20,0.30);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s var(--ease);
  z-index: 60;
}
/* Transparent hover-bridge: spans the visual gap between the trigger button and the
   panel so the cursor never leaves the hover zone on its way from trigger -> menu.
   It sits just above the panel and is wider than the panel's translateY/margin gap. */
.vp-dropdown::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: -16px; height: 18px; background: transparent;
}
/* Open when EITHER the trigger area (nav-item) OR the panel itself is hovered/focused,
   or when JS hover-intent / click marks it open. */
.vp-nav-item:hover .vp-dropdown,
.vp-nav-item:focus-within .vp-dropdown,
.vp-nav-item.vp-open .vp-dropdown,
.vp-dropdown:hover {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.vp-dropdown a {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 12px; border-radius: 12px; color: #1C1C1F;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.vp-dropdown a:hover { background: #F6F5F3; }
.vp-dropdown a .vp-dd-ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; background: rgba(255,56,92,.10); color: #FF385C;
}
.vp-dropdown a .vp-dd-t { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; color: #1C1C1F; }
.vp-dropdown a .vp-dd-d { font-size: 12.5px; color: #6B6B70; margin-top: 2px; line-height: 1.35; font-weight: 400; }
/* caret on the trigger */
.vp-nav-caret { transition: transform .3s var(--ease); }
.vp-nav-item:hover .vp-nav-caret,
.vp-nav-item:focus-within .vp-nav-caret,
.vp-nav-item.vp-open .vp-nav-caret,
.vp-nav-item:has(.vp-dropdown:hover) .vp-nav-caret { transform: rotate(180deg); }

/* --- Mobile menu (hamburger) --- */
.vp-mobile-panel {
  position: fixed; inset: 0; z-index: 70; display: none;
}
.vp-mobile-panel.open { display: block; }
.vp-mobile-panel .vp-m-backdrop {
  position: absolute; inset: 0; background: rgba(10,10,11,.55);
  backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s var(--ease);
}
.vp-mobile-panel.open .vp-m-backdrop { opacity: 1; }
.vp-mobile-panel .vp-m-sheet {
  position: absolute; top: 0; right: 0; height: 100%; width: min(86%, 360px);
  background: #fff; box-shadow: -24px 0 70px -24px rgba(15,15,20,.4);
  transform: translateX(100%); transition: transform .38s var(--ease);
  display: flex; flex-direction: column; padding: 22px 20px 28px; overflow-y: auto;
}
.vp-mobile-panel.open .vp-m-sheet { transform: translateX(0); }
.vp-mobile-panel a, .vp-mobile-panel button.vp-m-link {
  display: block; width: 100%; text-align: left;
  padding: 13px 12px; border-radius: 12px; font-size: 16px; font-weight: 600; color: #0A0A0B;
}
.vp-mobile-panel a:hover, .vp-mobile-panel button.vp-m-link:hover { background: #F6F5F3; }
.vp-mobile-panel .vp-m-sub a {
  font-size: 14.5px; font-weight: 500; color: #1C1C1F; padding-left: 22px;
}
.vp-mobile-panel .vp-m-label {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #6B6B70; padding: 14px 12px 4px;
}
.vp-hamburger { display: inline-flex; }
@media (min-width: 768px) { .vp-hamburger { display: none; } }

/* current-page nav highlight */
.vp-nav-current { color: #FF385C !important; }
