@import url("/assets/cookieconsent-a325c0b9.css"); /* GDPR consent banner styles (library base); banner logic in consent.js */
/* =========================================================
   Cinematic light homepage (Datum Direction). Self-contained:
   isolated from app.css/site.css, loaded only by the `cinematic`
   layout. Ported from overview-cinematic-light.html 2026-08-04.
   ========================================================= */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Zilla Slab"; font-style: normal; font-weight: 500; font-display: optional; src: url("/fonts/zilla-slab-500.woff2") format("woff2"); }
@font-face { font-family: "Zilla Slab"; font-style: normal; font-weight: 600; font-display: optional; src: url("/fonts/zilla-slab-600.woff2") format("woff2"); }
@font-face { font-family: "Zilla Slab"; font-style: normal; font-weight: 700; font-display: optional; src: url("/fonts/zilla-slab-700.woff2") format("woff2"); }

:root{
  --gold:#F0B100;--gold-hover:#FFBE1A;--gold-text:#B8860B;
  --ink:#14181C;--ink2:#5B6570;--ink3:#6B747E;
  --bg:#ffffff;--alt:#F6F5F2;--line:#E7E7E4;
  --panel-line:#2B333C;--panel-dim:#9AA6B2;
  --topbar-h:76px;                        /* match inner-page --head-h so the nav sits at the same height everywhere */
  --head:'Zilla Slab',Georgia,serif;      /* default: slab */
  --body:'Barlow',Arial,sans-serif;
}
body.type-barlow{--head:'Barlow Condensed',Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{background:var(--bg);color:var(--ink2);font-family:var(--body);-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
.container{max-width:1180px;margin-inline:auto;padding:0 30px}
h1,h2,h3,h4{font-family:var(--head);color:var(--ink);font-weight:700;line-height:1.02;letter-spacing:-.01em}
body.type-barlow h1,body.type-barlow h2{text-transform:uppercase;letter-spacing:.005em;font-weight:700}
.eyebrow{font-family:var(--body);font-size:.82rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}
.hl{color:var(--gold)}
.pad{padding:104px 0}
.alt{background:var(--alt)}
.sec-head{max-width:60rem}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{font-size:clamp(2rem,4vw,3rem);margin-top:12px}
.sec-head p{margin-top:16px;font-size:1.12rem;max-width:44rem;color:var(--ink2)}
.sec-head.center p{margin-inline:auto}
.mt{margin-top:46px}
/* scroll reveal (motion-gated, added only when JS + motion allowed) */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
.g3 .card:nth-child(2){transition-delay:.09s}
.g3 .card:nth-child(3){transition-delay:.18s}

.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--gold);color:#141518;border:0;border-radius:9px;font-family:var(--head);font-weight:700;font-size:1.02rem;padding:.9rem 1.7rem;text-decoration:none;cursor:pointer;transition:.15s;white-space:nowrap}
body.type-barlow .btn{text-transform:uppercase;letter-spacing:.02em}
.btn:hover{background:var(--gold-hover);transform:translateY(-1px)}
.btn.lg{font-size:1.08rem;padding:1rem 1.9rem}

/* nav */
/* The header sits over a looping video, so no flat text colour is safe on its
   own: measured across 30 frames of hero-loop.mp4, white failed 3:1 on 23 of
   them and #141518 still failed on 7. A white scrim at .42 lifts the worst
   frame to 5:1 for dark text, so the header is dark in BOTH states and the
   scrim is what makes that hold. Fades out downward so it reads as light
   falling on the header rather than a bar. */
.topbar{position:fixed;top:0;left:0;right:0;z-index:60;transition:.25s;background:transparent}
.topbar::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.42) 62%,rgba(255,255,255,0) 100%);transition:opacity .25s}
.topbar>*{position:relative;z-index:1}
/* Once the solid header takes over, the scrim is redundant. */
body.scrolled .topbar::before{opacity:0}
.head-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--topbar-h);gap:20px}
.head-inner>.brand{justify-self:start}
.brand img{height:33px;display:block}
/* Dark wordmark in both states (Kurt, 2026-09-12). The white .brand-hero
   variant was unreadable on load: 1.80:1 against the hero poster. */
.brand .brand-hero{display:none}
.brand .brand-solid{display:block}
.nav-center{display:flex;gap:32px}
.nav-center a{font-family:var(--head);font-weight:600;font-size:1.04rem;text-decoration:none;color:var(--ink);padding-bottom:3px;border-bottom:2px solid transparent;transition:.15s}
body.type-barlow .nav-center a{text-transform:uppercase;letter-spacing:.03em}
.nav-center a.active{border-bottom-color:var(--gold)}
.nav-center a:hover{color:var(--gold)}
.head-right{display:flex;align-items:center;gap:16px;justify-self:end}
.head-right .login{font-family:var(--head);font-weight:600;color:var(--ink);text-decoration:none;font-size:1.02rem}
body.type-barlow .head-right .login{text-transform:uppercase;letter-spacing:.03em}
body.scrolled .topbar{background:rgba(255,255,255,.93);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line)}
body.scrolled .nav-center a,body.scrolled .head-right .login{color:var(--ink)}
.navburger{display:none;flex-direction:column;justify-content:center;gap:4px;width:42px;height:38px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;padding:0 10px}
.navburger span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
body.scrolled .navburger{border-color:var(--line);background:#fff}body.scrolled .navburger span{background:var(--ink)}
.navburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.navburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{display:none;flex-direction:column;border-top:1px solid var(--line);background:#fff}
.mobile-menu a{padding:15px 30px;font-family:var(--head);font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid #f1eee7}

/* CINEMATIC HERO */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding-top:var(--topbar-h);background:#14161a url("/ziamap-hero-home.webp") center 38%/cover}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hero__dark{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(8,11,15,.58) 0%,rgba(8,11,15,.34) 30%,rgba(8,11,15,.50) 66%,rgba(8,11,15,.86) 100%),linear-gradient(90deg,rgba(8,11,15,.55) 0%,rgba(8,11,15,.22) 52%,rgba(8,11,15,0) 82%)}
@media(max-width:640px){.hero__dark{background:linear-gradient(180deg,rgba(8,11,15,.62) 0%,rgba(8,11,15,.44) 42%,rgba(8,11,15,.72) 100%)}}
.hero>.container{position:relative;z-index:4;width:100%;min-width:0}
.hero__inner{max-width:900px;padding:0 0 66px}
.hero .kick{display:inline-flex;align-items:center;gap:9px;color:#f7edd0;font-family:var(--head);font-weight:600;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:20px;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.hero .kick svg{width:18px;height:18px}
.hero h1{color:#fff;font-size:clamp(2.8rem,7vw,6rem);line-height:.98;letter-spacing:-.02em;text-shadow:0 2px 34px rgba(0,0,0,.4);max-width:15ch}
body.type-barlow .hero h1{font-weight:700;letter-spacing:0}
.hero .sub{font-size:clamp(1.1rem,1.7vw,1.4rem);line-height:1.5;color:#eef1f4;margin-top:20px;max-width:38rem;text-shadow:0 1px 16px rgba(0,0,0,.55)}
.hero .sub b{color:#fff;font-weight:600}
.hero .act{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:30px}
.capture{display:flex;gap:9px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);border-radius:12px;padding:7px;backdrop-filter:blur(8px);max-width:440px;flex:1;min-width:280px}
.capture input{flex:1;background:transparent;border:0;outline:0;color:#fff;font-family:var(--body);font-size:1rem;padding:0 14px;min-width:0}
.capture input::placeholder{color:#e2e8ef}
/* Beta signup: company + email + button inline in the glass pill. Reuses the
   base .capture styling (glass pill, transparent inputs); just widens it for
   two fields and adds a thin divider between company and email. */
.capture--beta{max-width:620px}
.capture--beta .cap-company{border-right:1px solid rgba(255,255,255,.3)}
.capture--beta .btn{white-space:nowrap}
/* Bottom CTA sits on a light section (.final .capture already sets white bg +
   dark text); just make the divider dark. */
.final .capture--beta .cap-company{border-right:1px solid var(--line)}
@media(max-width:640px){.capture--beta .cap-company{border-right:0}.capture--beta .btn{width:100%;justify-content:center}}
/* Hero secondary CTA: the tour opener. Wears the same glass pill as .capture at
   the same height, so the two read as one pair on one baseline instead of a
   button plus a caption. The gold play disc carries the accent; the label pair
   gives the pill the mass to hold its own next to Get early access.
   Named .tourcta because .tour belongs to the scroll-tour section below, whose
   flex-direction:column leaked in and stacked this control. */
.hero .tourcta{display:inline-flex;align-items:center;gap:13px;min-height:64px;padding:0 22px 0 9px;border-radius:12px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(8px);color:#fff;text-decoration:none;transition:background .15s,border-color .15s,transform .15s}
.hero .tourcta:hover{background:rgba(255,255,255,.22);border-color:rgba(240,177,0,.8);transform:translateY(-1px)}
.hero .tourcta .pl{width:44px;height:44px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.hero .tourcta .pl svg{width:17px;height:17px;fill:#141518;margin-left:3px}
.hero .tourcta:hover .pl{background:var(--gold-hover)}
.hero .tourcta .tt{display:flex;flex-direction:column;gap:3px;line-height:1.12}
.hero .tourcta b{font-family:var(--head);font-weight:700;font-size:1.02rem}
body.type-barlow .hero .tourcta b{text-transform:uppercase;letter-spacing:.02em}
.hero .tourcta .tt span{font-family:var(--head);font-weight:600;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#f6e3b4}
.hero .tourcta:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:640px){.hero .tourcta{width:100%;justify-content:center;padding:0 18px 0 9px}}
@media(prefers-reduced-motion:reduce){.hero .tourcta:hover{transform:none}}
.hero .microtrust{margin-top:18px;font-size:.95rem;color:#dbe2ea;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.hero .microtrust b{color:#fff;font-weight:600}
.hero__datum{position:absolute;z-index:4;right:34px;bottom:34px;display:flex;align-items:center;gap:12px;color:#fff}
.hero__datum svg{width:38px;height:38px;flex-shrink:0}
.hero__datum .lab{display:block;font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.66rem;color:#f4e7c4}
.hero__datum .fact{display:block;font-family:var(--head);font-weight:700;font-size:1rem;line-height:1.2}
@media(max-width:960px){.hero__datum{display:none}}

/* TRUST STRIP (light) */
.trust{background:var(--ink);color:#cfd6dd}
.trust .container{max-width:1320px}
.trust .row{display:flex;align-items:center;flex-wrap:wrap;gap:12px 26px;padding:22px 0}
.trust .free{margin-left:auto}
.trust .ti{display:flex;align-items:center;gap:11px;font-size:.98rem}
.trust .ti svg{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:2;flex-shrink:0}
.trust .ti b{color:#fff;font-weight:600}
.trust .sep{flex:1}
.trust .free{font-family:var(--head);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:.8rem;color:#141518;background:var(--gold);padding:7px 13px;border-radius:6px;white-space:nowrap}

/* INTERACTIVE APP DEMO (desktop drives, phone mirrors) */
.demo .demo-head{text-align:center;max-width:52rem;margin:0 auto}
.demo-head h2{font-size:clamp(2rem,4vw,3rem);margin-top:12px}
.demo-head p{color:var(--ink2);font-size:1.12rem;margin-top:14px}
.demo-hint{display:inline-flex;align-items:center;gap:9px;margin-top:20px;color:var(--gold-text);font-family:var(--head);font-weight:600;font-size:.95rem}
.demo-hint svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.appdemo{display:grid;grid-template-columns:minmax(0,1fr) 88px 236px;align-items:center;margin-top:48px}
.ad-lbl{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--gold-text);text-align:center;margin-bottom:14px}
/* desktop (left, clickable) */
.ad-browser{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 26px 60px rgba(20,24,28,.22)}
.ad-browser .bbar{display:flex;align-items:center;gap:7px;padding:11px 15px;background:#f2f1ee;border-bottom:1px solid var(--line)}
.ad-browser .bbar i{width:11px;height:11px;border-radius:50%;background:#d3d1ca}
.ad-browser .bbar .addr{margin-left:12px;flex:1;height:23px;max-width:360px;border-radius:6px;background:#fff;border:1px solid var(--line);font-family:ui-monospace,monospace;font-size:.7rem;color:var(--ink3);display:flex;align-items:center;padding:0 12px;overflow:hidden;white-space:nowrap}
.ad-screen{position:relative;line-height:0}
.ad-screen img{width:100%;display:block;transition:opacity .2s}
.hot{position:absolute;border:0;background:transparent;cursor:pointer;padding:0;border-radius:6px;transition:background .12s,box-shadow .12s;z-index:2}
.hot:hover{background:rgba(240,177,0,.18);box-shadow:0 0 0 2px rgba(240,177,0,.65)}
.hot:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
/* a11y: skip link + keyboard focus */
.skip{position:absolute;left:8px;top:-56px;z-index:200;background:var(--ink);color:#fff;font-family:var(--head);font-weight:600;padding:10px 16px;border-radius:0 0 8px 8px;text-decoration:none;transition:top .15s}
.skip:focus{top:0}
.nav-center a:focus-visible,.head-right .login:focus-visible,.mobile-menu a:focus-visible,.navburger:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
.btn:focus-visible,.pbtn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.hot-tab{display:none}
.appdemo[data-hastabs="1"] .hot-tab{display:block}
.hot-open{display:none}
.appdemo[data-islist="1"] .hot-open{display:block}
/* connector desktop -> phone */
.ad-link{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%}
.ad-line{position:absolute;top:50%;left:-4px;right:-4px;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,var(--line),var(--line) 6px,transparent 6px,transparent 12px)}
.ad-badge{position:relative;z-index:2;width:52px;height:52px;border-radius:50%;background:var(--gold);color:#141518;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(20,24,28,.22)}
.ad-badge svg{width:22px;height:22px;transform:rotate(90deg)}
.ad-caption{position:relative;z-index:2;font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:.6rem;color:var(--ink3);background:var(--alt);padding:3px 8px;white-space:nowrap}
.ad-link.go .ad-caption{color:var(--gold-text)}
.ad-pulse{position:absolute;top:50%;left:0;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--gold);opacity:0;z-index:1;will-change:transform,opacity}
.ad-link.go .ad-pulse{animation:adflow .8s ease-in-out}
@keyframes adflow{0%{transform:translateX(-6px);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(94px);opacity:0}}
/* phone (right, mirror) */
.ad-phone{position:relative;width:214px;margin:0 auto;border-radius:34px;background:#0c0e11;padding:9px;box-shadow:0 26px 60px rgba(20,24,28,.30)}
.ad-phone img{width:100%;display:block;border-radius:26px;transition:opacity .2s}
.mirror-flash{position:absolute;inset:0;border-radius:34px;pointer-events:none;box-shadow:inset 0 0 0 0 rgba(240,177,0,0)}
.ad-phone.flash .mirror-flash{animation:flashring 1.1s ease-out}
@keyframes flashring{0%{box-shadow:inset 0 0 0 4px rgba(240,177,0,.9)}100%{box-shadow:inset 0 0 0 4px rgba(240,177,0,0)}}
.demo-foot{display:flex;align-items:center;justify-content:center;margin-top:32px;min-height:3.2em}
.demo-note{color:var(--ink3);font-size:.9rem;text-align:center;max-width:46rem}
.demo-desc{color:var(--ink2);font-size:1.32rem;line-height:1.45;text-align:center;max-width:44rem;margin:16px auto 0;min-height:2.6em;transition:opacity .2s}
.demo-desc b{color:var(--gold-text);font-family:var(--head);font-weight:700;margin-right:.3em}
.ad-mobnav{display:none}
.ad-mobnav button{flex:0 0 auto;min-height:44px;padding:10px 18px;border:1px solid var(--line);border-radius:999px;background:#fff;font-family:var(--head);font-weight:700;font-size:.84rem;color:var(--ink2);cursor:pointer;white-space:nowrap;transition:.14s}
.ad-mobnav button:hover,.ad-mobnav button.on{border-color:var(--gold);color:var(--gold-text);background:#fff}

/* App demo controls. The pinprog row is the always-visible tab + progress nav
   for the auto-cycling carousel. The old desktop scroll-pin was removed: it
   welded the feature switch to scroll and jumped frames on touch devices. */
.pinwrap{position:relative}
.hint-click{display:inline}
.hint-mob{display:none}
.pinprog{display:flex;justify-content:center;gap:4px;margin-top:26px;flex-wrap:wrap}
.pinprog button{display:inline-flex;align-items:center;gap:9px;background:transparent;border:0;cursor:pointer;padding:8px 13px;border-radius:999px;font-family:var(--head);font-weight:700;font-size:.78rem;letter-spacing:.03em;text-transform:uppercase;color:var(--ink3);transition:color .18s}
.pinprog button i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:transform .2s,background .2s}
.pinprog button:hover{color:var(--ink2)}
.pinprog button.on{color:var(--gold-text)}
.pinprog button.on i{background:var(--gold);transform:scale(1.4)}

/* HOW IT WORKS */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:30px}
.card .ic{width:46px;height:46px;border-radius:11px;background:#FFF3D2;display:flex;align-items:center;justify-content:center;color:var(--gold-text);margin-bottom:18px}
.card .ic svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.4rem}
.card p{margin-top:9px;font-size:1rem;color:var(--ink2)}

/* SETUP FILMSTRIP (guided setup walkthrough) */
.filmstrip{display:flex;gap:18px;justify-content:center;align-items:flex-start;margin-top:50px;overflow-x:auto;padding:4px 2px 16px;scroll-snap-type:x proximity}
.fstep{flex:0 0 auto;width:186px;display:flex;flex-direction:column;align-items:center;scroll-snap-align:center}
.fstep .cap{display:flex;align-items:center;gap:9px;margin-bottom:15px;white-space:nowrap}
.fstep .num{width:27px;height:27px;flex-shrink:0;border-radius:50%;background:var(--gold);color:#141518;font-family:var(--head);font-weight:700;font-size:.86rem;display:flex;align-items:center;justify-content:center}
.fstep .lbl{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.84rem;color:var(--ink)}
.fs-phone{width:186px;border-radius:28px;background:#0c0e11;padding:8px}
.fs-phone img{width:100%;display:block;border-radius:21px}
.filmstrip .fstep:nth-child(2){transition-delay:.07s}
.filmstrip .fstep:nth-child(3){transition-delay:.14s}
.filmstrip .fstep:nth-child(4){transition-delay:.21s}
.filmstrip .fstep:nth-child(5){transition-delay:.28s}
@media(max-width:960px){
  .filmstrip{flex-wrap:wrap;overflow-x:visible;justify-content:center;gap:26px 14px;margin-top:36px}
  .fstep{flex:0 0 calc((100% - 28px)/3);width:auto;min-width:0}
  .fs-phone{width:100%}
}
@media(max-width:420px){.filmstrip .fstep .lbl{font-size:.72rem}.filmstrip .cap{gap:6px}}

/* PRODUCT TOUR (alternating lifestyle / app) */
.tour{display:flex;flex-direction:column;gap:100px}
.trow{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.trow.rev .trow-text{order:2}
.trow-text .eyebrow{display:block;margin-bottom:12px}
.trow-text h2{font-size:clamp(1.8rem,3.2vw,2.5rem);margin-bottom:16px;max-width:16ch}
.trow-text p{font-size:1.1rem;color:var(--ink2)}
.trow-text .ibul{display:flex;gap:12px;margin-top:20px;font-size:1rem;color:var(--ink2)}
.trow-text .ibul svg{width:22px;height:22px;flex-shrink:0;fill:none;stroke:var(--gold-text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.trow-text .ibul b{font-family:var(--head);color:var(--ink);font-weight:700}
.chip{display:inline-block;margin-left:8px;background:var(--gold);color:#141518;font-family:var(--head);font-weight:700;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;vertical-align:middle}
.trow-media{position:relative}
.tour-photo{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 26px 60px rgba(20,24,28,.20)}
.tour-photo img{width:100%;display:block}
.tour-photo .cap{position:absolute;left:0;right:0;bottom:0;padding:28px 20px 16px;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);color:#fff;font-family:var(--head);font-weight:700;font-size:.95rem}
.tour-phone{width:288px;margin:0 auto;border-radius:38px;background:#0c0e11;padding:11px;box-shadow:0 26px 60px rgba(20,24,28,.28)}
.tour-phone img{width:100%;display:block;border-radius:28px}
.tour-browser{border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 26px 60px rgba(20,24,28,.18)}
.tour-browser .bbar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#f2f1ee;border-bottom:1px solid var(--line)}
.tour-browser .bbar i{width:10px;height:10px;border-radius:50%;background:#d3d1ca}
.tour-browser .bbar .addr{margin-left:10px;flex:1;height:21px;max-width:260px;border-radius:6px;background:#fff;border:1px solid var(--line);font-family:ui-monospace,monospace;font-size:.66rem;color:var(--ink3);display:flex;align-items:center;padding:0 10px}
.tour-browser img{width:100%;display:block}

/* FOUNDER LINE (Fizzy/PostHog) */
.founder{background:var(--ink);color:#fff}
.founder .fq{display:grid;grid-template-columns:96px 1fr;gap:28px;align-items:center;max-width:60rem;margin:0 auto}
.founder .fq .av{width:96px;height:96px;border-radius:50%;overflow:hidden;border:2px solid var(--panel-line)}
.founder .fq .av img{width:100%;height:100%;object-fit:cover}
.founder blockquote{font-family:var(--head);font-weight:600;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.28;letter-spacing:-.01em}
body.type-barlow .founder blockquote{text-transform:none}
.founder .by{margin-top:14px;font-size:.98rem;color:var(--panel-dim)}
.founder .by b{color:#fff;font-weight:600}

/* FINAL */
.final{text-align:center}
.final h2{font-size:clamp(2.1rem,4vw,3.1rem);max-width:20ch;margin-inline:auto}
.final .price{margin-top:16px;font-family:var(--head);font-weight:600;font-size:1.2rem;color:var(--ink)}
.final .act{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.final .capture{background:#fff;border:1px solid var(--line);margin:0}
.final .capture input{color:var(--ink)}
.final .capture input::placeholder{color:var(--ink3)}
/* Shared cinematic footer (matches cine.css so home + inner pages are identical). */
.site-foot{background:var(--ink);color:#cfd6dd;padding:64px 0 34px}
.site-foot .fcols{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:36px}
.site-foot .fbrand img{height:30px;margin-bottom:16px}
.site-foot .fbrand p{color:var(--panel-dim);font-size:.98rem;max-width:24rem}
.site-foot .fcol h2,.site-foot .fcol h4{font-family:var(--head);color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.site-foot .fcol a{display:block;color:#cfd6dd;font-size:.98rem;padding:5px 0;text-decoration:none;transition:.15s}
.site-foot .fcol a:hover{color:var(--gold)}
.site-foot .fbot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);color:var(--panel-dim);font-size:.9rem}
.site-foot .fbot .tag{font-family:var(--head);font-weight:600;color:#fff}
@media(max-width:960px){.site-foot .fcols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.site-foot .fcols{grid-template-columns:1fr}}

/* type toggle */
.typetoggle{position:fixed;right:16px;bottom:16px;z-index:120;display:flex;gap:6px;align-items:center;background:rgba(17,17,17,.92);border:1px solid #2a2a2a;border-radius:10px;padding:8px 10px;font-family:'Barlow',sans-serif;font-size:.74rem;color:#cbd2da;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.typetoggle b{color:#fff;text-transform:uppercase;letter-spacing:.05em;font-size:.66rem;margin-right:2px}
.typetoggle button{font-family:'Barlow',sans-serif;font-size:.76rem;color:#cbd2da;background:#1e1e1e;border:1px solid #333;border-radius:6px;padding:5px 10px;cursor:pointer}
.typetoggle button.on{background:var(--gold);border-color:var(--gold);color:#141518;font-weight:700}

/* modal */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.modal.open{display:flex}
.modal__bg{position:absolute;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(4px)}
.modal__dlg{position:relative;z-index:1;width:100%;max-width:960px}
.modal__frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border:1px solid #2a2a2a;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.6)}
.modal__frame video{width:100%;height:100%;object-fit:cover}
/* Portrait variant: the tour reel is 9:16, and the default frame is 16/9 with
   object-fit:cover, which would crop the sides clean off. Width is driven by the
   viewport HEIGHT so a tall video always fits without scrolling (the close button
   sits 42px above the frame, hence the extra headroom). contain, never cover. */
.modal--portrait .modal__dlg{max-width:min(520px, calc((100vh - 150px) * 0.5625))}
.modal--portrait .modal__frame{aspect-ratio:9/16}
.modal--portrait .modal__frame video{object-fit:contain}
@media (max-width:640px){
  /* on a phone the reel is the same shape as the screen, which is where 9:16 wins */
  .modal--portrait .modal__dlg{max-width:calc((100vh - 110px) * 0.5625)}
}
.modal__tag{display:inline-block;margin-bottom:10px;font-family:var(--head);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.72rem;color:#141518;background:var(--gold);padding:5px 10px}
.modal__x{position:absolute;top:-42px;right:0;background:transparent;border:0;color:#fff;cursor:pointer;padding:4px}
.modal__x svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}

@media(max-width:960px){
  .navburger{display:flex}.mobile-menu:not([hidden]){display:flex}.nav-center{display:none}.head-right .login,.head-right>.btn{display:none}
  .appdemo{grid-template-columns:minmax(0,1fr);justify-items:center;gap:0}
  .ad-desk,.ad-link{display:none}
  .demo .lede{display:none}
  .demo-hint .hint-click{display:none}
  .demo-hint .hint-mob{display:inline}
  .ad-mob{width:100%;display:flex;flex-direction:column;align-items:center}
  .ad-line{top:-2px;bottom:-2px;left:50%;right:auto;width:2px;height:auto;margin:0 0 0 -1px;background:repeating-linear-gradient(180deg,var(--line),var(--line) 6px,transparent 6px,transparent 12px)}
  .ad-badge svg{transform:rotate(0deg)}
  .ad-pulse{top:0;left:50%;margin-left:-4.5px;margin-top:0}
  .ad-link.go .ad-pulse{animation:adflowv .8s ease-in-out}
  @keyframes adflowv{0%{transform:translateY(-6px);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(88px);opacity:0}}
  .ad-phone{width:250px}
  .pinprog{display:none}
  .ad-mobnav{display:flex;gap:8px;overflow-x:auto;margin-top:24px;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .g3{grid-template-columns:1fr}
  .tour{gap:56px}
  .trow{grid-template-columns:1fr;gap:30px}.trow.rev .trow-text{order:0}
  .founder .fq{grid-template-columns:1fr;text-align:center;gap:18px}.founder .fq .av{margin:0 auto}
  .pad{padding:74px 0}
}
@media(prefers-reduced-motion:reduce){
  .hero__video{display:none}
  .hero{background:#14161a url("/ziamap-hero-home.webp") center 38%/cover}
  .ad-link.go .ad-pulse{animation:none}
  .ad-phone.flash .mirror-flash{animation:none}
  .ad-screen img,.ad-phone img{transition:none}
  .btn:hover,.nav-center a:hover,.pbtn:hover{transform:none}
}
@media(max-width:768px){
  .hero__video{display:none}
  .hero{background:#14161a url("/ziamap-hero-home.webp") center 38%/cover}
}
@media(max-width:640px){.container{padding:0 20px}.hero h1{font-size:clamp(2.3rem,9vw,3.2rem);max-width:none}.hero{align-items:center}.capture{flex-direction:column;background:transparent;border:0;padding:0}.capture input{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);border-radius:10px;padding:14px}.final .capture input{background:#fff;border:1px solid var(--line)}}

/* ---- Page transitions (Turbo 8 View Transitions) ----
   Ported from site.css so the redesign keeps the tuned cross-fade/slide.
   The header holds still; only the body cross-fades and slides.
   The home header (116px, transparent overlay) uses its OWN transition name,
   distinct from the inner-page header (.topbar in cine.css, 76px, solid).
   Sharing one name morphed the header height across the home <-> inner-page
   boundary, which read as a vertical jump; separate names cross-fade cleanly
   instead. Inner <-> inner still shares site-header and holds perfectly still. */
.site-head{view-transition-name:home-header}
@keyframes zm-page-out{ to{ opacity:0; transform:translateY(-8px); } }
@keyframes zm-page-in{ from{ opacity:0; transform:translateY(16px); } }
::view-transition-old(root){ animation:220ms cubic-bezier(.4,0,1,1) both zm-page-out; }
::view-transition-new(root){ animation:340ms cubic-bezier(0,0,.2,1) both zm-page-in; }
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){ animation:none; }
}