/* Kritisch for phones. Everything here is limited to html[data-device=phone], so the website layout is not touched.
   Start of the phone app: the first page (landing). Sign-up, the city pages and the review forms follow in the same file. */
html[data-device=phone] body{-webkit-text-size-adjust:100%}
/* ---- landing ---- */
html[data-device=phone] .f-ui::before{inset:10px}
html[data-device=phone] .f-nav{padding:calc(env(safe-area-inset-top,0px) + 24px) 22px 0;gap:10px}
html[data-device=phone] .f-nav .wm{font-size:.82rem;letter-spacing:.22em;white-space:nowrap}
html[data-device=phone] .f-nav .wm::before{width:30px;height:30px;margin-right:9px;vertical-align:-10px}
html[data-device=phone] .f-nav div{gap:6px}
html[data-device=phone] #navLogin,html[data-device=phone] #langQuick{display:none}
html[data-device=phone] .f-nav #navSignup{height:38px;padding:0 16px;font-size:.85rem}
html[data-device=phone] .f-hero{top:calc(env(safe-area-inset-top,0px) + 92px);bottom:auto;transform:translateX(-50%);width:calc(100% - 44px)}
html[data-device=phone] .f-hero.out{transform:translate(-50%,-18px)}
html[data-device=phone] .f-hero::before{inset:-30px -22px}
html[data-device=phone] .f-crest{display:block;width:92px;margin:0 auto 10px}
html[data-device=phone] .f-hero h1{font-size:clamp(1.85rem,8.4vw,2.35rem);line-height:1.1}
html[data-device=phone] .f-hero p{font-size:.95rem;line-height:1.5}
html[data-device=phone] .e-pill,html[data-device=phone] .f-hero .pill{font-size:.78rem}
html[data-device=phone] .e-trust{display:none}
html[data-device=phone] .e-cta{flex-direction:column;gap:10px}
html[data-device=phone] .e-cta .btn-p,html[data-device=phone] .e-cta .btn-s{width:100%;height:52px}
@media(max-height:700px){html[data-device=phone] .f-crest{display:none}html[data-device=phone] .f-hero p{display:none}}

/* ---- bottom bar and home ---- */
html[data-device=phone] .d-tabs{left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);height:62px;padding:0 4px;background:#0d0b09f7}
html[data-device=phone] .d-tabs button{flex:1 1 0;min-width:0;justify-content:center;gap:3px;font-size:.62rem;letter-spacing:.04em}
html[data-device=phone] .d-tabs svg{width:22px;height:22px}
html[data-device=phone] .d-tabs .d-plus{flex:1 1 0;width:auto;height:auto;margin:0;padding:0;border-radius:0;background:none;box-shadow:none;color:var(--da2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
html[data-device=phone] .d-tabs .d-plus svg{width:22px;height:22px;margin:0}
html[data-device=phone] body[data-acct=personal] .dash{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 104px)}
html[data-device=phone] .hn-search input{font-size:.95rem;padding-left:16px;padding-right:10px;text-overflow:ellipsis}
html[data-device=phone] .hn-search input::placeholder{text-overflow:ellipsis}
/* ---- waiting page ---- */
html[data-device=phone] .wl{gap:12px;padding:20px 16px}
html[data-device=phone] .wl-hi{position:absolute;top:calc(env(safe-area-inset-top,0px) + 22px);left:16px;right:96px;text-align:left;font-size:.7rem;letter-spacing:.2em;line-height:1.4;overflow-wrap:anywhere}
html[data-device=phone] .wl-stage{width:min(340px,92vw);height:380px;margin:40px 0 0}
html[data-device=phone] .wl-quote{font-size:1.1rem;max-width:88vw;margin:0}
html[data-device=phone] .wl-skip{top:calc(env(safe-area-inset-top,0px) + 14px);right:16px}
@media(max-height:700px){html[data-device=phone] .wl-stage{height:330px;transform:scale(.82);margin:6px 0 -10px}}