:root{
  --ink:#1d1d1f; --ink-2:#424245; --grey:#6e6e73; --faint:#86868b;
  --hair:#d2d2d7; --wash:#f5f5f7; --white:#fff;
  --blue:#2e4f8f; --blue-lt:#6b9de8; --orange:#f75214; --orange-h:#d8420c;
  --font:'Archivo', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{background:var(--white); color:var(--ink); font-family:var(--font);
  font-weight:500; font-stretch:100%; line-height:1.5; -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block;}
a{color:inherit;}

.wrap{max-width:1000px; margin:0 auto; padding:0 22px;}
.narrow{max-width:720px; margin:0 auto;}
section{padding:96px 0;}
@media (min-width:768px){ section{padding:132px 0;} }
.wash{background:var(--wash);}
.center{text-align:center;}

/* ---- nav ---- */
nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.08);}
nav .in{max-width:1000px; margin:0 auto; padding:0 22px; height:52px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;}
nav img{height:17px;}
nav .right{display:flex; align-items:center; gap:14px;}
nav .note{font-size:13px; color:var(--grey); font-weight:600; display:none;}
@media (min-width:600px){ nav .note{display:block;} }

/* ---- type ---- */
h1{font-weight:800; font-size:40px; line-height:1.06; letter-spacing:-.028em; color:var(--ink);}
@media (min-width:768px){ h1{font-size:66px; letter-spacing:-.032em;} }
h2{font-weight:800; font-size:31px; line-height:1.1; letter-spacing:-.025em; color:var(--ink);}
@media (min-width:768px){ h2{font-size:46px;} }
h3{font-weight:700; font-size:20px; line-height:1.25; letter-spacing:-.015em; color:var(--ink);}
.kicker{font-size:18px; font-weight:600; color:var(--orange); letter-spacing:-.01em; margin-bottom:12px;}
@media (min-width:768px){ .kicker{font-size:21px;} }
.lede{font-size:19px; color:var(--grey); line-height:1.48; letter-spacing:-.01em;}
@media (min-width:768px){ .lede{font-size:23px;} }
p.body{font-size:17px; color:var(--grey); line-height:1.55; margin-bottom:15px;}
@media (min-width:768px){ p.body{font-size:18px;} }
p.body strong{color:var(--ink); font-weight:600;}

/* ---- buttons ---- */
.btn{display:inline-block; padding:15px 30px; border-radius:980px; border:none; cursor:pointer;
  text-decoration:none; background:var(--orange); color:#fff; font-family:inherit;
  font-weight:700; font-size:16.5px; letter-spacing:-.01em; transition:background .2s ease, transform .2s ease;}
.btn:hover{background:var(--orange-h);}
.btn:active{transform:scale(.98);}
.btn:disabled{background:var(--faint); cursor:not-allowed;}
.btn--sm{padding:8px 18px; font-size:14px;}
.btn--wide{width:100%;}

/* ---- hero ---- */
.hero{padding:72px 0 0; text-align:center;}
@media (min-width:768px){ .hero{padding:104px 0 0;} }
.eyebrow{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700;
  color:var(--orange); letter-spacing:.01em; margin-bottom:18px;}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--orange);}

/* The audience call-out that opens the headline. Orange rather than ink so it
   reads as a label addressed to the reader, and the sentence that follows still
   scans as one headline rather than two. */
.h1-call{color:var(--orange);}

/* All caps needs more tracking than sentence case at this size, or the letters
   sit on top of each other and it reads as shouting rather than as a label. */
.eyebrow--caps{text-transform:uppercase; letter-spacing:.07em; font-size:12.5px;}

/* Countdown.
   Deliberately quiet: a hairline card, ink digits, one orange label. Loud
   scarcity on a free training reads as a trick, and this page is asking a
   stranger to believe four proof numbers directly underneath it.
   It is hidden until the script sets a real deadline, so a visitor with JS off
   never sees a frozen 7 days. */
.cdown{margin:30px auto 0; display:inline-flex; flex-direction:column; align-items:center;
  gap:12px; padding:18px 26px 16px; border:1px solid var(--hair); border-radius:18px;
  background:var(--white);}
.cdown[hidden]{display:none;}
.cdown--tight{margin:0 auto 26px; display:flex;}
.cdown-lbl{font-size:12px; font-weight:700; color:var(--orange); text-transform:uppercase;
  letter-spacing:.07em;}
.cdown-units{display:flex; align-items:flex-start; gap:8px;}
.cdu{min-width:58px; display:flex; flex-direction:column; align-items:center; gap:3px;}
.cdu b{font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1;
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;}
.cdu span{font-size:11px; font-weight:600; color:var(--faint); text-transform:uppercase;
  letter-spacing:.06em;}
@media (max-width:420px){
  .cdown{padding:16px 14px 14px;}
  .cdown-units{gap:4px;}
  .cdu{min-width:48px;}
  .cdu b{font-size:25px;}
}
.hero .lede{margin:20px auto 0; max-width:620px;}
.cta-stack{margin-top:34px; display:flex; flex-direction:column; align-items:center; gap:14px;}
.meta{font-size:14.5px; color:var(--faint);}

/* ---- statement rows ---- */
.stmt{max-width:820px; margin:0 auto;}
.stmt .item{padding:34px 0; border-bottom:1px solid var(--hair);}
.stmt .item:first-child{border-top:1px solid var(--hair);}
.stmt .n{font-size:13px; font-weight:700; color:var(--blue-lt); letter-spacing:.06em; margin-bottom:9px;}
.stmt .h{font-size:21px; font-weight:700; letter-spacing:-.018em; color:var(--ink); line-height:1.32;}
@media (min-width:768px){ .stmt .h{font-size:24px;} }
.stmt .s{font-size:16.5px; color:var(--grey); line-height:1.5; margin-top:9px;}

/* ---- note panel ---- */
.note-panel{background:var(--wash); border-radius:20px; padding:32px 26px; max-width:720px; margin:0 auto;}
@media (min-width:768px){ .note-panel{padding:40px 38px;} }
.note-panel h3{margin-bottom:14px;}

/* ---- form card ---- */
.form-card{background:var(--white); border-radius:26px; max-width:560px; margin:0 auto;
  box-shadow:0 2px 6px rgba(0,0,0,.06), 0 24px 60px rgba(0,0,0,.09); overflow:hidden;}
.form-card .top{padding:38px 32px 12px; text-align:center;}
.form-card .body-pad{padding:8px 32px 34px;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:13.5px; font-weight:600; color:var(--ink-2); margin-bottom:7px;}
.field input, .field select{
  width:100%; padding:14px 15px; font-family:inherit; font-size:16px; font-weight:500;
  color:var(--ink); background:var(--white); border:1px solid var(--hair); border-radius:12px;
  appearance:none; -webkit-appearance:none; transition:border-color .18s ease;}
.field select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2386868b' stroke-width='1.6'/></svg>");
  background-repeat:no-repeat; background-position:right 15px center;}
.field input:focus, .field select:focus{outline:none; border-color:var(--blue-lt); box-shadow:0 0 0 3px rgba(107,157,232,.18);}
.field .err{display:none; font-size:13px; color:var(--orange); margin-top:6px;}
.field.invalid input, .field.invalid select{border-color:var(--orange);}
.field.invalid .err{display:block;}
.fineprint{font-size:13.5px; color:var(--faint); text-align:center; margin-top:16px; line-height:1.5;}
.formstatus{display:none; font-size:15px; margin-top:14px; text-align:center; line-height:1.5;}
.formstatus.bad{display:block; color:var(--orange);}

/* ---- video ---- */
.vsl{margin:48px auto 0; max-width:920px;}
.vsl-frame{position:relative; border-radius:22px; overflow:hidden; background:#000;
  box-shadow:0 30px 70px rgba(0,0,0,.20), 0 4px 12px rgba(0,0,0,.08); aspect-ratio:16/9;}
.vsl-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.vsl-ph{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:16px; background:linear-gradient(150deg,#22282f,#0e1116); text-align:center; padding:24px;}
.vsl-ph .t{color:rgba(255,255,255,.86); font-size:15px; font-weight:600;}
.vsl-cap{text-align:center; font-size:14px; color:var(--faint); margin-top:16px;}

/* ---- route ---- */
.route{text-align:center; font-size:15.5px; color:var(--grey); margin-top:40px; line-height:1.6;}
.route a{color:var(--blue-lt); font-weight:600; text-decoration:none;}
.route a:hover{text-decoration:underline;}

footer{padding:44px 0 60px; border-top:1px solid var(--hair); background:var(--wash);}
footer img{height:16px; opacity:.5; margin:0 auto 14px;}
footer p{font-size:12.5px; color:var(--faint); text-align:center; line-height:1.6;}
footer a{color:var(--faint);}

@media (prefers-reduced-motion:reduce){*{transition:none !important; scroll-behavior:auto !important;}}

/* ---- proof bar (hero) ---- */
.proofbar{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 0;
  max-width:860px; margin:44px auto 0; padding-top:26px; border-top:1px solid var(--hair);}
.proofbar .pf{flex:1 1 150px; padding:6px 12px; text-align:center;}
.proofbar .pf b{display:block; font-size:23px; font-weight:800; letter-spacing:-.03em; color:var(--ink); line-height:1.1;}
.proofbar .pf span{display:block; font-size:12.5px; color:var(--faint); margin-top:5px; line-height:1.35;}
@media (min-width:768px){ .proofbar .pf b{font-size:27px;} }

/* ---- application card ---- */
.app-card{background:var(--white); border-radius:26px; max-width:620px; margin:0 auto;
  box-shadow:0 2px 6px rgba(0,0,0,.06), 0 24px 60px rgba(0,0,0,.09);
  padding:30px 24px 34px;}
@media (min-width:768px){ .app-card{padding:38px 40px 42px;} }
.app-progress{display:flex; gap:6px; margin-bottom:28px;}
.app-progress span{flex:1; height:3px; border-radius:2px; background:var(--hair); transition:background .25s ease;}
.app-progress span.is-done{background:var(--orange);}

.app-step{display:none;}
.app-step.is-active{display:block;}
.app-q{display:block; font-size:20px; font-weight:700; letter-spacing:-.018em; color:var(--ink); line-height:1.3;}
@media (min-width:768px){ .app-q{font-size:23px;} }
.app-hint{display:block; font-size:15px; color:var(--grey); margin-top:9px; line-height:1.5;}

.app-options{display:flex; flex-direction:column; gap:9px; margin-top:22px;}
.app-opt{width:100%; text-align:left; padding:15px 17px; font-family:inherit; font-size:16px;
  font-weight:600; color:var(--ink); background:var(--white); border:1px solid var(--hair);
  border-radius:13px; cursor:pointer; letter-spacing:-.01em; line-height:1.35;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;}
.app-opt:hover{border-color:var(--blue-lt); background:var(--wash);}
.app-opt:active{transform:scale(.995);}

/* Multi-select. The tick box has to be visible before anything is picked, or
   nothing on screen says this question takes more than one answer. */
.app-opt--multi{padding-left:54px; position:relative;}
.app-opt--multi::before{content:""; position:absolute; left:17px; top:50%;
  transform:translateY(-50%); width:22px; height:22px; border-radius:7px;
  border:1.5px solid var(--hair); background:var(--white);
  transition:background .16s ease, border-color .16s ease;}
.app-opt--multi::after{content:""; position:absolute; left:24px; top:50%;
  width:8px; height:13px; border:solid #fff; border-width:0 2.5px 2.5px 0;
  transform:translateY(-62%) rotate(45deg); opacity:0; transition:opacity .16s ease;}
.app-opt--multi.is-on{border-color:var(--orange); background:#fff6f2;}
.app-opt--multi.is-on::before{background:var(--orange); border-color:var(--orange);}
.app-opt--multi.is-on::after{opacity:1;}
.app-opt--multi:hover::before{border-color:var(--blue-lt);}
.app-opt--multi.is-on:hover::before{border-color:var(--orange);}

.app-back{display:inline-block; margin-top:20px; padding:0; border:none; background:none;
  font-family:inherit; font-size:14.5px; font-weight:600; color:var(--faint); cursor:pointer;}
.app-back:hover{color:var(--grey); text-decoration:underline;}

.app-fields{margin-top:22px;}
.app-field{margin-bottom:14px;}
.app-field label{display:block; font-size:13.5px; font-weight:600; color:var(--ink-2); margin-bottom:7px;}
.app-field input{width:100%; padding:14px 15px; font-family:inherit; font-size:16px; font-weight:500;
  color:var(--ink); background:var(--white); border:1px solid var(--hair); border-radius:12px;
  appearance:none; -webkit-appearance:none; transition:border-color .18s ease;}
.app-field input:focus{outline:none; border-color:var(--blue-lt); box-shadow:0 0 0 3px rgba(107,157,232,.18);}
.app-submit{width:100%; margin-top:8px;}
.app-error{display:none; font-size:14px; color:var(--orange); margin-top:12px; line-height:1.5;}

.app-warn{background:#fff4ef; border:1px solid #f9c4ac; border-radius:14px; padding:16px 18px;
  margin-top:20px; font-size:15px; color:var(--ink-2); line-height:1.55;}
.app-warn strong{color:var(--ink); font-weight:700;}
.app-warn a{color:var(--orange); font-weight:600; text-decoration:none;}
.app-warn a:hover{text-decoration:underline;}

.app-cal{margin-top:22px; border:1px solid var(--hair); border-radius:16px; overflow:hidden; background:var(--white);}
.app-cal iframe{display:block; width:100%; height:760px; border:0;}
.app-fallback{font-size:13.5px; color:var(--faint); text-align:center; margin-top:14px; line-height:1.55;}
.app-fallback a{color:var(--blue-lt); font-weight:600; text-decoration:none;}
.app-fallback a:hover{text-decoration:underline;}

.app-trust{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin-top:4px;}
.app-trust span{font-size:13px; color:var(--faint); font-weight:600;}
.app-trust span::before{content:"✓"; color:var(--orange); margin-right:6px; font-weight:700;}

/* ---- wide hero headline (paradox hook runs long on purpose) ---- */
.h1-wide{max-width:880px; margin:0 auto;}
@media (min-width:768px){ .h1-wide{font-size:56px;} }
@media (min-width:1000px){ .h1-wide{font-size:68px;} }

/* ---- curiosity bullets ---- */
.bullets{list-style:none; max-width:820px; margin:0 auto; padding:0;}
.bullets li{position:relative; padding:0 0 0 40px; margin-bottom:22px;
  font-size:17.5px; line-height:1.55; color:var(--grey); letter-spacing:-.005em;}
@media (min-width:768px){ .bullets li{font-size:19px; margin-bottom:24px;} }
.bullets li:last-child{margin-bottom:0;}
.bullets li strong{color:var(--ink); font-weight:700;}
.bullets li::before{content:""; position:absolute; left:8px; top:11px;
  width:9px; height:9px; border-radius:50%; background:var(--orange);}
@media (min-width:768px){ .bullets li::before{top:13px;} }

/* ---- credibility photos ---- */
.proofpix{display:grid; gap:14px; max-width:820px; margin:40px auto 0;}
@media (min-width:700px){ .proofpix{grid-template-columns:repeat(2,1fr); gap:18px;} }
.proofpix img{width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 28%;
  border-radius:16px; display:block;}

/* ---- as seen on ---- */
.seenon{max-width:820px; margin:44px auto 0; text-align:center;}
.seenon-lbl{display:block; font-size:11.5px; font-weight:700; color:var(--faint);
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px;}
.seenon-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:22px 38px;}
.seenon-row img{height:26px; width:auto; filter:grayscale(1); opacity:.55;
  transition:filter .2s ease, opacity .2s ease;}
@media (min-width:768px){ .seenon-row img{height:30px;} }
@media (hover:hover){ .seenon-row img:hover{filter:none; opacity:1;} }

/* ---- routes out for people this isn't for ---- */
.routes{display:grid; gap:12px; margin-top:26px;}
@media (min-width:640px){ .routes{grid-template-columns:repeat(2,1fr);} }
.route-card{display:block; background:var(--white); border:1px solid var(--hair);
  border-radius:16px; padding:20px 22px; text-decoration:none; color:inherit;
  transition:border-color .18s ease;}
.route-card:hover{border-color:var(--blue-lt);}
.route-card b{display:block; font-size:16.5px; font-weight:700; letter-spacing:-.015em;
  color:var(--ink); line-height:1.35;}
.route-card span{display:block; font-size:14px; color:var(--grey); margin-top:7px;
  line-height:1.5;}

/* ---- stacked routes (not-ready page) ---- */
.routes--stack{grid-template-columns:1fr !important; max-width:680px; margin:0 auto;
  gap:14px;}
.route-card--rec{border-color:var(--blue-lt); background:#fbfcfe;}
.route-card .rec{display:inline-block; font-size:11px; font-weight:800; color:var(--orange);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:9px;}
.route-card--rec b{font-size:19px;}

/* ---- stills from the recording ---- */
.stills{display:grid; gap:12px; max-width:900px; margin:48px auto 0;}
@media (min-width:760px){ .stills{grid-template-columns:repeat(2,1fr); gap:18px;} }
.stills figure{margin:0;}
.stills img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
  border:1px solid var(--hair); border-radius:12px; background:var(--white);}

/* ---- anchor targets clear the sticky nav ----
   Without this a jump to #get puts the section heading under the 53px sticky
   bar, so the buyer lands on a form with its label cut off. */
[id]{scroll-margin-top:72px;}

/* ---- hero poster ---- */
.poster{display:block; position:relative; max-width:840px; margin:42px auto 0;
  border-radius:20px; overflow:hidden; background:#000;
  box-shadow:0 22px 54px rgba(0,0,0,.18), 0 3px 10px rgba(0,0,0,.07);
  transition:transform .22s ease, box-shadow .22s ease;}
.poster img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block;}
.poster-play{position:absolute; left:50%; top:50%; width:76px; height:76px;
  transform:translate(-50%,-50%); border-radius:50%; background:var(--orange);
  box-shadow:0 8px 26px rgba(0,0,0,.32); transition:transform .22s ease;}
.poster-play::after{content:""; position:absolute; left:52%; top:50%;
  transform:translate(-50%,-50%); border-style:solid; border-width:13px 0 13px 21px;
  border-color:transparent transparent transparent #fff;}
@media (hover:hover){
  .poster:hover{transform:translateY(-2px); box-shadow:0 28px 64px rgba(0,0,0,.22), 0 3px 10px rgba(0,0,0,.07);}
  .poster:hover .poster-play{transform:translate(-50%,-50%) scale(1.06);}
}
.poster-cap{text-align:center; font-size:14px; color:var(--faint); margin-top:15px;}
@media (min-width:768px){ .poster{margin-top:48px;} .poster-play{width:88px; height:88px;} }

/* ---- motion ----
   Every hidden state is scoped to .js-motion, which only exists once the script
   has run AND the visitor has not asked for reduced motion. So a failed script,
   no JS, or a reduce-motion preference all leave the page fully visible. */
.js-motion [data-enter]{opacity:0; transform:translateY(16px);}
.js-motion [data-enter].is-in{opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}

.js-motion [data-stagger] > *{opacity:0; transform:translateY(14px);}
.js-motion [data-stagger].is-in > *{opacity:1; transform:none;
  transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);}

/* ---- locked video state ---- */
.lockshot{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.85);}
.lockveil{position:absolute; inset:0; background:linear-gradient(180deg,
  rgba(10,12,16,.34) 0%, rgba(10,12,16,.52) 55%, rgba(10,12,16,.70) 100%);}
.lockbadge{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  background:rgba(255,255,255,.94); color:var(--ink); border-radius:980px;
  padding:13px 22px; font-size:14.5px; font-weight:700; letter-spacing:-.01em;
  box-shadow:0 10px 30px rgba(0,0,0,.28);}
@media (min-width:768px){ .lockbadge{font-size:16px; padding:15px 26px;} }
.lockicon{width:15px; height:17px; flex:none; position:relative;
  border:2.5px solid var(--orange); border-radius:3px; border-top:none; margin-top:5px;}
.lockicon::before{content:""; position:absolute; left:50%; top:-11px; width:13px; height:11px;
  transform:translateX(-50%); border:2.5px solid var(--orange); border-bottom:none;
  border-radius:7px 7px 0 0;}

/* ---- heading rule ---- */
[data-rule]{position:relative;}
[data-rule]::after{content:""; position:absolute; left:50%; bottom:-18px;
  transform:translateX(-50%) scaleX(0); transform-origin:center;
  width:64px; height:3px; border-radius:2px; background:var(--orange);}
.js-motion [data-rule]::after{transition:transform .7s cubic-bezier(.16,1,.3,1) .1s;}
[data-rule].is-in::after, html:not(.js-motion) [data-rule]::after{transform:translateX(-50%) scaleX(1);}

/* ---- sticky mobile CTA ---- */
.stickycta{position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid rgba(0,0,0,.08);
  transform:translateY(115%); transition:transform .34s cubic-bezier(.16,1,.3,1);
  pointer-events:none;}
.stickycta.is-on{transform:translateY(0); pointer-events:auto;}
@media (min-width:768px){ .stickycta{display:none;} }
@media (prefers-reduced-motion:reduce){ .stickycta{transition:none;} }

/* ---- the unlock beat ---- */
.vsl-frame .lockshot, .vsl-frame .lockveil, .vsl-frame .lockbadge{
  transition:opacity .36s ease, transform .36s cubic-bezier(.16,1,.3,1);}
.vsl-frame.is-unlocking .lockveil{opacity:0;}
.vsl-frame.is-unlocking .lockbadge{opacity:0; transform:translate(-50%,-50%) scale(.94);}
.vsl-frame.is-unlocking .lockshot{opacity:0; transform:scale(1.03);}
.vsl-frame.is-open > *{animation:fadeup .5s cubic-bezier(.16,1,.3,1) both;}
@keyframes fadeup{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){
  .vsl-frame .lockshot, .vsl-frame .lockveil, .vsl-frame .lockbadge{transition:none;}
  .vsl-frame.is-open > *{animation:none;}
}

/* ---- live field validation ---- */
.field, .app-field{position:relative;}
.field input, .field select, .app-field input{padding-right:42px;}

/* pass tick */
.field.is-ok input, .field.is-ok select, .app-field.is-ok input{border-color:#3aa76d;}
.field.is-ok::after, .app-field.is-ok::after{
  content:""; position:absolute; right:16px; top:38px; width:7px; height:13px;
  border:solid #3aa76d; border-width:0 2.5px 2.5px 0; transform:rotate(45deg);
  animation:tickin .22s cubic-bezier(.16,1,.3,1) both;}
@keyframes tickin{from{opacity:0; transform:rotate(45deg) scale(.6);} to{opacity:1; transform:rotate(45deg) scale(1);}}

.field.is-bad input, .field.is-bad select, .app-field.is-bad input{border-color:var(--orange);}

.vmsg{font-size:13px; line-height:1.45; margin-top:6px; color:var(--orange);}
.vmsg:empty{display:none;}
.vmsg.is-suggest{color:var(--grey);}
.vfix{background:none; border:none; padding:0 0 0 3px; font-family:inherit; font-size:13px;
  font-weight:700; color:var(--blue-lt); cursor:pointer; text-decoration:underline;}
.vfix:hover{color:var(--blue);}

@media (prefers-reduced-motion:reduce){
  .field.is-ok::after, .app-field.is-ok::after{animation:none;}
}