/* TryODA v1.4 — Site UI Scanner audit fixes. Layered after ty-fx.css. */
/* 1. CLS: reserve space for JS-filled hero + mockup */
.hero h1{min-height:2.04em}.hero>p{min-height:1.55em}
.hero .btn{min-height:48px}
.mock{aspect-ratio:920/334;contain:layout}
.mock .mb{min-height:300px}
.mock .bub{min-height:2.6em}
@media(max-width:900px){.mock{aspect-ratio:auto;min-height:560px}}
@media(max-width:560px){.mock{min-height:520px}}
.mock .ty-type{display:inline}.mock .ty-caret{display:inline-block;width:2px;height:1em;background:currentColor;vertical-align:-2px;margin-left:2px;animation:tyc 1s steps(1) infinite}
@keyframes tyc{50%{opacity:0}}
.mock .ms .pl,.mock .ms .mt{transition:opacity .6s ease,transform .6s ease}
.mock.ty-build .ms .pl,.mock.ty-build .ms .mt{opacity:0;transform:translateY(8px)}
header [data-odl-mount]{display:inline-block;width:30px;height:30px;vertical-align:middle}

/* 7. Heading rhythm */
h2{line-height:1.1;letter-spacing:-.02em}h3{line-height:1.25;letter-spacing:-.02em}

/* 9. Focus */
:focus-visible{outline:2px solid #1a9bd7!important;outline-offset:3px}
textarea:focus-visible,input:focus-visible{outline-offset:1px}

/* 6. Steps vignette */
.st p{margin:6px 0 16px;color:var(--mut);font-size:15px}
.vg{height:46px;border-radius:12px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 12px}
.vg1 span{height:10px;border-radius:999px;background:#e2e8f0}.vg1 span:first-child{width:55%}.vg1 span:last-child{width:22%;background:#ccfbf1}
.vg2 i{width:20px;height:20px;border-radius:50%}.vg2 i:nth-child(1){background:#7cc4ff}.vg2 i:nth-child(2){background:#9be7b4}.vg2 i:nth-child(3){background:#ffb36b}.vg2 i:nth-child(4){background:#c9b8ff;box-shadow:0 0 0 2px #fff,0 0 0 4px #14161a}
.vg3{justify-content:flex-end}.vg3 b{font-size:12px;background:var(--ink);color:#fff;border-radius:999px;padding:6px 12px}

/* Footer contact/legal */
footer .fl2 a{color:#f3ede4;text-decoration:none}footer .fl2 a:hover{text-decoration:underline}

/* 8. Mobile hero spacing + tap targets */
.lang button{min-height:44px;min-width:44px}
header .lg{min-height:44px}
@media(max-width:560px){
  .hero{padding-inline:20px}.hero>p{font-size:18px}
  .w{padding:0 20px}
  .lang button{padding:6px 10px}
}

/* 2. Mobile nav */
.tham{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0}
.tham i{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .25s}
.tham[aria-expanded=true] i:nth-child(1){transform:translateY(7px) rotate(45deg)}.tham[aria-expanded=true] i:nth-child(2){opacity:0}.tham[aria-expanded=true] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.tsheet{position:fixed;inset:68px 0 0;background:#fff;z-index:40;display:flex;flex-direction:column;padding:20px 20px calc(20px + env(safe-area-inset-bottom));overflow:auto;opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s;visibility:hidden}
.tsheet.on{opacity:1;transform:none;visibility:visible}
.tsheet a,.tsheet button.it{display:flex;justify-content:space-between;align-items:center;min-height:56px;border:0;border-bottom:1px solid var(--line);background:none;font:600 20px/1.2 Inter,system-ui,sans-serif;color:var(--ink);text-align:left;padding:0 4px;cursor:pointer;width:100%}
.tsheet .d{font:400 14px/1.45 Inter,system-ui,sans-serif;color:var(--mut);padding:10px 4px 14px;border-bottom:1px solid var(--line);display:none}.tsheet .d.on{display:block}
.tsheet .tsoon{font-size:11px;font-weight:700;text-transform:uppercase;background:#f1f5f9;color:#5b6170;border-radius:999px;padding:3px 8px}
.tsheet .cta{position:sticky;bottom:0;margin-top:auto;padding-top:16px;background:#fff}.tsheet .cta .btn{width:100%;min-height:52px}
@media(max-width:700px){.tham{display:inline-flex}}
@media(min-width:701px){.tsheet{display:none}}
body.ty-lock{overflow:hidden}

/* 5. Mascots: one corner widget, not over hero/flow */
@media(max-width:700px){.odl-peek{display:none!important}}
.odl-fab{bottom:calc(18px + env(safe-area-inset-bottom))!important;right:calc(18px + env(safe-area-inset-right))!important;transition:opacity .3s,transform .3s}
body.ty-in-hero .odl-fab,body.ty-flow .odl-fab,body.ty-lock .odl-fab,body.ty-flow .odl-peek{opacity:0!important;transform:translateY(12px);pointer-events:none}

/* E7 rotating placeholder */
.phw{position:relative}.phr{position:absolute;left:19.5px;top:19.5px;right:19.5px;color:#9aa1ad;font-size:17px;line-height:1.55;pointer-events:none;transition:opacity .4s}
.phw.has-ph textarea::placeholder{color:transparent}.phw.typed .phr{opacity:0}

/* E5 conic glow on "You're here" */
@property --ty-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.ty-lc.here{isolation:isolate}
.ty-lc.here::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:-1;pointer-events:none;background:conic-gradient(from var(--ty-ang),transparent 0 70%,#14b8a6 85%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:tyang 6s linear infinite}
@keyframes tyang{to{--ty-ang:360deg}}

@media(prefers-reduced-motion:reduce){.ty-lc.here::before{animation:none}.mock .ty-caret{display:none}.tsheet{transition:none}.phr{display:none}.phw.has-ph textarea::placeholder{color:#9aa1ad}}