/* Escort landing: live "try your site" builder and the "one evening" story. Uses promo.css variables. */
.try{position:relative;padding:56px 0 40px;background:radial-gradient(70vmax 50vmax at 85% 10%,var(--glow),transparent 62%)}
.try-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:64px;align-items:center}
.try h1{font:900 clamp(40px,5.6vw,84px)/.95 var(--fd);letter-spacing:-.04em;margin:0 0 20px;text-wrap:balance}
.try h1 span{display:block;color:var(--mag)}
.try .lead{margin-bottom:26px}
.try-row{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;margin-bottom:18px}
.try-l{display:block}
.try-l>span:first-child,.try-f legend{display:block;font:800 11px/1 var(--fd);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin:0 0 8px;padding:0}
.try-l input{width:100%;min-height:58px;padding:0 18px;border-radius:16px;border:1.5px solid var(--line);background:var(--panel);color:var(--ink);font:800 22px/1 var(--fd);letter-spacing:-.01em;-webkit-appearance:none;appearance:none}
.try-l input::placeholder{color:var(--mute);opacity:.6;font-weight:600}
.try-l input:focus{outline:none;border-color:var(--mag);box-shadow:0 0 0 4px var(--glow)}
.try-addr{margin-bottom:18px}
.addr-in{display:flex;align-items:stretch;border-radius:16px;border:1.5px solid var(--line);background:var(--panel);overflow:hidden}
.addr-in:focus-within{border-color:var(--mag);box-shadow:0 0 0 4px var(--glow)}
.try-l .addr-in input{flex:1;min-width:0;border:0;border-radius:0;box-shadow:none;min-height:54px;font-size:19px}
.try-l .addr-in input:focus{box-shadow:none}
.addr-in em{display:flex;align-items:center;padding:0 16px 0 2px;font:700 16px/1 var(--fd);font-style:normal;color:var(--mute);white-space:nowrap}
.addr-out{margin-top:8px;font-size:14px}
.addr-out:empty{display:none}
.addr-out.wait{opacity:.55}
.addr-out.ok .addr-st{color:#1f9d55}
.addr-out.no .addr-st{color:#e5484d}
.addr-sg{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.addr-sg button{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:700 13px/1 var(--fd);cursor:pointer}
.addr-sg button:hover{border-color:var(--mag)}
.b[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.try-more{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.try-more .wide{grid-column:1/-1}
.try-l.sm input{min-height:50px;padding:0 14px;border-radius:14px;font-size:17px}
.try-l input[type=number]{-moz-appearance:textfield}
.try-l input::-webkit-outer-spin-button,.try-l input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.try-f fieldset{border:0;margin:0 0 18px;padding:0;min-width:0}
.try-tpl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.try-tpl legend{grid-column:1/-1}
.try-tpl label{position:relative;cursor:pointer}
.try-tpl input{position:absolute;opacity:0;pointer-events:none}
.try-tpl span{display:block;height:100%;padding:12px 12px 11px;border-radius:14px;border:1.5px solid var(--line);background:var(--panel);transition:border-color .2s,transform .2s}
.try-tpl b{display:block;font:800 15px/1.1 var(--fd)}
.try-tpl small{display:block;margin-top:4px;font-size:12px;line-height:1.3;color:var(--mute)}
.try-tpl input:checked+span{border-color:var(--mag);box-shadow:0 10px 30px -14px var(--glow);transform:translateY(-2px)}
.try-tpl input:focus-visible+span{outline:2px solid var(--mag);outline-offset:3px}
.try-go{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:8px}
.try-go .hint{font-size:14px;color:var(--mute);max-width:22em}
.try-ph{display:flex;flex-direction:column;align-items:center}
.ph{position:relative;width:360px;height:740px;border-radius:52px;padding:12px;background:#0b0709;box-shadow:0 0 0 1.5px rgba(255,255,255,.08) inset,0 40px 120px -30px var(--glow),0 30px 80px -40px rgba(0,0,0,.6)}
.ph iframe{display:block;width:100%;height:100%;border:0;border-radius:40px;background:#111}
.ph-load{position:absolute;inset:12px;border-radius:40px;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s}
.ph.busy .ph-load{opacity:1}
.try-url{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--glass);font:700 14px/1 var(--fd);max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.try-url .dot{flex:none;width:8px;height:8px;border-radius:50%;background:#20c46b;box-shadow:0 0 0 4px rgba(32,196,107,.18)}

.eve{padding:110px 0 0}
.eve-l{list-style:none;margin:48px 0 0;padding:0;position:relative}
.eve-l::before{content:'';position:absolute;left:58px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--mag),transparent)}
.eve-l li{display:grid;grid-template-columns:118px minmax(0,1fr) 340px;gap:32px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line)}
.eve-l li:last-child{border-bottom:0}
.eve-l time{position:relative;justify-self:start;padding:8px 14px;border-radius:999px;background:var(--mag);color:#fff;font:800 15px/1 var(--fd);letter-spacing:.04em;box-shadow:0 10px 30px -10px var(--glow)}
.eve-t h3{font:800 clamp(22px,2.3vw,30px)/1.1 var(--fd);letter-spacing:-.02em;margin:0 0 10px}
.eve-t p{margin:0;color:var(--mute);max-width:34em}
.eve-v{border-radius:20px;border:1px solid var(--line);background:var(--panel);padding:18px;box-shadow:0 24px 60px -36px var(--glow)}
.serp small{display:block;font-size:13px;color:#1f9d55;margin-bottom:4px}
.serp b{display:block;font:700 19px/1.25 var(--fb);color:#4c7dff;margin-bottom:6px}
.serp p{margin:0;font-size:14px;color:var(--mute)}
.avail{position:relative;padding:0;overflow:hidden;height:220px}
.avail img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.avail .pill{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font:700 13px/1 var(--fd);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.avail .pill i{width:8px;height:8px;border-radius:50%;background:#20c46b}
.rates .cur{display:flex;gap:6px;margin-bottom:12px}
.rates .cur b,.rates .cur span{padding:6px 10px;border-radius:999px;font:700 12px/1 var(--fd);border:1px solid var(--line)}
.rates .cur b{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.rates p{display:flex;justify-content:space-between;margin:0;padding:9px 0;border-top:1px solid var(--line)}
.rates p.ft b{color:var(--mag)}
.rates small{display:block;margin-top:8px;font-size:11px;color:var(--mute)}
.chat{background:#0b141a;border-color:#0b141a}
.chat .out{margin:0 0 0 auto;max-width:90%;padding:10px 14px;border-radius:14px 14px 4px 14px;background:#005c4b;color:#e9edef;font-size:15px}
.note{display:grid;gap:2px}
.note .app{font:700 11px/1 var(--fd);letter-spacing:.12em;text-transform:uppercase;color:#20c46b}
.note b{font:800 17px/1.2 var(--fd)}
.note p{margin:0;color:var(--mute);font-size:14px}

.own-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:36px}
.own-g div{padding:24px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel)}
.own-g h3{font:800 19px/1.15 var(--fd);margin:0 0 8px}
.own-g p{margin:0;color:var(--mute);font-size:15px}
.faq-l{max-width:860px;margin-top:28px}
.faq-l details{border-bottom:1px solid var(--line)}
.faq-l summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;font:800 18px/1.3 var(--fd)}
.faq-l summary::-webkit-details-marker{display:none}
.faq-l summary::after{content:'+';position:absolute;right:4px;top:16px;font-size:26px;color:var(--mag)}
.faq-l details[open] summary::after{content:'−'}
.faq-l p{margin:0 0 20px;color:var(--mute)}
.end{padding:120px 0 110px;text-align:center}
.end h2{font:900 clamp(32px,4.6vw,64px)/1 var(--fd);letter-spacing:-.035em;margin:0 auto 30px;max-width:16em;text-wrap:balance}
.end h2 span{color:var(--mag)}
.end .cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

@media (max-width:1100px){
 .try-in{grid-template-columns:minmax(0,1fr);gap:0}
 /* On narrow screens the live phone comes first, right after the heading, then the form. */
 .try-f{display:contents}
 .try-f>*{order:3}
 .try-f>.slogan,.try-f>h1,.try-f>.lead{order:1}
 .try-ph{order:2;margin:0 0 30px}
 .eve-l li{grid-template-columns:96px minmax(0,1fr)}
 .eve-l::before{left:46px}
 .eve-v{grid-column:2;max-width:420px}
 .own-g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
 .try{padding:28px 0 20px}
 .try-row{grid-template-columns:1fr}
 .try-tpl,.try-addr{margin-bottom:18px}
.addr-in{display:flex;align-items:stretch;border-radius:16px;border:1.5px solid var(--line);background:var(--panel);overflow:hidden}
.addr-in:focus-within{border-color:var(--mag);box-shadow:0 0 0 4px var(--glow)}
.try-l .addr-in input{flex:1;min-width:0;border:0;border-radius:0;box-shadow:none;min-height:54px;font-size:19px}
.try-l .addr-in input:focus{box-shadow:none}
.addr-in em{display:flex;align-items:center;padding:0 16px 0 2px;font:700 16px/1 var(--fd);font-style:normal;color:var(--mute);white-space:nowrap}
.addr-out{margin-top:8px;font-size:14px}
.addr-out:empty{display:none}
.addr-out.wait{opacity:.55}
.addr-out.ok .addr-st{color:#1f9d55}
.addr-out.no .addr-st{color:#e5484d}
.addr-sg{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.addr-sg button{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:700 13px/1 var(--fd);cursor:pointer}
.addr-sg button:hover{border-color:var(--mag)}
.b[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.try-more{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ph{width:min(320px,100%);height:min(560px,64vh);border-radius:44px;padding:10px}
 .ph iframe,.ph-load{border-radius:34px}
 .ph-load{inset:10px}
 .try-go .b{width:100%}
 .eve{padding-top:80px}
 .eve-l::before{display:none}
 .eve-l li{grid-template-columns:1fr;gap:14px}
 .eve-v{grid-column:auto;max-width:none}
 .own-g{grid-template-columns:1fr}
 .end{padding:90px 0 80px}
 .end .b{width:100%}
}
.try-url.no .dot{background:#e5484d;box-shadow:0 0 0 4px rgba(229,72,77,.18)}

/* Phones: jump back up to the live preview while filling the form. */
.see-up{position:fixed;z-index:30;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translate(-50%,120%);opacity:0;pointer-events:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:0;background:var(--mag);color:#fff;font:800 12px/1 var(--fd);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 12px 34px -10px var(--glow);cursor:pointer;transition:transform .25s,opacity .25s}
.see-up.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
@media (min-width:1101px){.see-up{display:none}}
