/* DS Dental — landing page v6
   DS Dental's own blue (from dsdental.ca). Homepage = 3 blocks only:
   1) smile image + one question, 2) smile simulator, 3) real patient photos.
   The questions open a flow that flips page by page; the form is the last page.
   Breakpoints: 991 / 767 / 479px. */

:root{
  --blue:#385BB2;      /* dsdental.ca primary */
  --blue-d:#31509C;    /* dsdental.ca hover/dark */
  --deep:#1C2F63;
  --sky:#EEF2FB;
  --sky-2:#F6F8FD;
  --ink:#16213A;
  --muted:#5E6A82;
  --line:#DCE3F2;
  --gold:#F5B82E;
  /* accents borrowed from the BiteBot smile simulator */
  --teal:#2EE3C5;
  --teal-d:#1C7A6C;
  --violet:#6C3CE9;
  --cream:#F7F2EC;
  --grad:linear-gradient(90deg,#2EE3C5 0%,#4A7BE0 100%);
  --grad-v:linear-gradient(90deg,#6C3CE9 0%,#2EE3C5 100%);
  --ok:#1C7C4A;
  --err:#C62F3E;
  --r:14px;
  --r-lg:24px;
  --wrap:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overscroll-behavior:none;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
body{overscroll-behavior:none}
body.is-locked{overflow:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;font-weight:800}
.container{max-width:1250px;margin:0 auto;padding:0 20px}
.section{padding:60px 0}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.section__head{text-align:center;margin-bottom:10px}
.section__head h2{font-size:clamp(28px,3.6vw,42px)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- buttons: solid pill + circular arrow badge ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:8px 64px 8px 28px;border:0;border-radius:999px;background:var(--blue);color:#fff;font-weight:700;font-size:15px;line-height:1.2;text-align:center;transition:background .25s,transform .25s var(--ease)}
.btn::after{content:"";position:absolute;right:8px;top:50%;width:36px;height:36px;border-radius:50%;transform:translateY(-50%);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23385BB2' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .3s var(--ease)}
.btn:hover{background:var(--blue-d);transform:translateY(-2px)}
.btn:hover::after{transform:translateY(-50%) rotate(45deg)}
.btn--lg{min-height:58px;padding-right:70px;font-size:16px}
.btn--lg::after{width:40px;height:40px}
.btn--block{width:100%}
.btn[disabled]{opacity:.6;pointer-events:none}
:focus-visible{outline:3px solid #8FA9E8;outline-offset:3px}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .3s}
.header.is-stuck{box-shadow:0 8px 24px rgba(28,47,99,.1)}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:76px}
.logo img{height:44px;width:auto}
.header__right{display:flex;align-items:center;gap:22px}
.header__phone{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--deep)}
.header__phone svg{width:18px;height:18px;color:var(--blue)}
.header .btn{min-height:46px;font-size:14px;padding:6px 54px 6px 22px}
.header .btn::after{width:32px;height:32px;right:7px;background-size:14px}

/* ---------- 1. hero: smile image + one question (no overlay; the photo's own light left side holds the text) ---------- */
.hero{position:relative;display:grid;align-items:center;min-height:clamp(520px,74vh,680px);overflow:hidden;background:#EAF1FA}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
.hero__in{position:relative;z-index:2;width:100%;padding-top:48px;padding-bottom:48px}
.ask{max-width:540px;color:var(--deep)}
.ask__kicker{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;background:#ffffffd4;border:1px solid var(--line);font-size:16px}
.ask__q{font-size:clamp(34px,4.6vw,56px);margin-bottom:28px;color:var(--deep)}
.ask__answers{display:flex;flex-wrap:wrap;gap:14px}
.ans{display:flex;align-items:center;gap:14px;min-width:220px;padding:10px 12px 10px 10px;border:0;border-radius:99px;background:#fff;color:var(--deep);font-weight:800;font-size:18px;text-align:left;transition:transform .2s var(--ease),box-shadow .2s}
.ans__face{flex:none;width:48px;height:48px;transition:transform .3s var(--ease)}
.ans__txt small{display:block;font-size:12.5px;font-weight:500;opacity:.75}
.ans:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(28,47,99,.22)}
.ans:hover .ans__face{transform:rotate(-8deg) scale(1.06)}
.ans:active{transform:scale(.98)}
.ans.is-picked{box-shadow:0 0 0 3px var(--teal),0 8px 8px rgba(46,227,197,.3)}
.ans:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.ask__meta{margin-top:18px;font-size:14px;color:var(--muted)}
.ask__stars{color:var(--gold);letter-spacing:2px;margin-right:8px}

/* ---------- 2. smile simulator ---------- */
.sim{background:var(--sky-2)}
.sim__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.sim__copy h2{font-size:clamp(28px,3.6vw,42px);margin-bottom:12px}
.sim__copy>p{color:var(--muted);font-size:17px;margin-bottom:24px;max-width:46ch}
.drop{position:relative;display:flex;align-items:center;gap:16px;padding:20px;margin-bottom:22px;border:2px dashed #A9BBE6;border-radius:var(--r);background:#fff;cursor:pointer;transition:border-color .25s,background .25s}
.drop:hover,.drop.is-over{border-color:var(--blue);background:var(--sky)}
.drop__ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--sky);color:var(--blue)}
.drop__ic svg{width:24px;height:24px}
.drop b{display:block;font-size:16px}
.drop small{color:var(--muted);font-size:13.5px}
.drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.picked{display:flex;align-items:center;gap:16px;padding:14px;margin-bottom:22px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.picked[hidden]{display:none}
.picked img{flex:none;width:76px;height:76px;border-radius:12px;object-fit:cover}
.picked b{display:flex;align-items:center;gap:6px;font-size:15px;color:var(--ok)}
.picked b svg{width:18px;height:18px}
.picked small{display:block;color:var(--muted);font-size:13px}
.link{border:0;background:none;color:var(--blue);font-weight:700;font-size:13.5px;text-decoration:underline;text-underline-offset:3px;padding:0;margin-top:4px}
.note{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:var(--muted)}
.note svg{flex:none;width:16px;height:16px}

/* simulator embed (BiteBot, theme=dark) sits on a dark band */
.sim{background:linear-gradient(160deg,var(--deep),#24407F)}
.sim .section__head h2{color:#fff}
.sim .section__head p{color:rgba(255,255,255,.8);margin-top:10px;font-size:17px}
.sim .eyebrow{color:#9FB6EE}
.sim__frame{max-width:800px;margin:0 auto;border-radius:var(--r-lg);overflow:hidden}
.sim__frame.is-fallback{background:#0f1730;box-shadow:0 24px 60px rgba(0,0,0,.3)} /* only BiteBot's own page needs a box; while loading the skeleton sits on the section */
/* The simulator never scrolls inside its own frame and leaves no empty space: bitebot-embed.php reports the height of
   the current step and the page sets the iframe to it (inline height, see app-6.js). The fixed heights below are only
   used until that first report, and in fallback mode (BiteBot's own page, which cannot report its height). */
.sim__frame{--h0:560px;--h1:1000px}
.sim__frame iframe{display:block;width:100%;height:var(--h0);border:0;transition:height .3s var(--ease)}
.sim__frame.is-fallback.is-open iframe{height:var(--h1)}
/* shown until the simulator reports its first height (or, in fallback mode, until BiteBot's page has loaded) */
.sim__frame{position:relative}
.sim__loading{position:absolute;inset:0;z-index:1;display:grid;align-content:start;justify-items:center;gap:22px;padding:14px 8px;pointer-events:none}
/* skeleton blocks: a soft shimmer sweeps across them */
.sk{display:block;border-radius:10px;background:linear-gradient(90deg,var(--sk-a) 0%,var(--sk-b) 45%,var(--sk-a) 90%);background-size:250% 100%;animation:skel 1.4s ease-in-out infinite}
@keyframes skel{from{background-position:100% 0}to{background-position:-150% 0}}
.skel{--sk-a:rgba(255,255,255,.08);--sk-b:rgba(255,255,255,.2)}
.skel--light{--sk-a:#E9EDF6;--sk-b:#F6F8FC}
.skel__steps{display:flex;align-items:center;justify-content:space-between;width:min(100%,700px);position:relative}
.skel__steps::before{content:"";position:absolute;left:16px;right:16px;top:50%;height:3px;margin-top:-1.5px;background:rgba(255,255,255,.12)}
.skel__steps i{position:relative;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.16)}
.skel__steps i:first-child{background:rgba(46,227,197,.45)}
.skel__card{display:grid;gap:16px;width:min(100%,700px);padding:30px 30px 34px;border-radius:20px;box-shadow:0 0 0 2px rgba(46,227,197,.35) inset;background:rgba(255,255,255,.04)}
.sk--title{width:46%;height:30px}
.sk--line{width:72%;height:14px}
.sk--box{height:58px}
.skel__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sk--btn{height:54px}
.sk--cta{height:56px;margin-top:10px}
@media(max-width:600px){.skel__steps i{width:26px;height:26px}.skel__card{padding:22px 18px 26px}.sk--title{width:70%}}
@media(prefers-reduced-motion:reduce){.sk{animation:none}}
.sim__frame.is-ready .sim__loading{opacity:0;visibility:hidden;transition:opacity .12s,visibility 0s .12s}
@media(max-width:991px){.sim__frame{--h0:520px;--h1:1150px}}
@media(max-width:600px){.sim__frame{--h0:610px;--h1:1350px}}
@media(max-width:340px){.sim__frame{--h0:680px;--h1:1450px}}

/* before / after example */
.compare{position:relative;overflow:hidden;border-radius:var(--r-lg);aspect-ratio:3/2;background:var(--sky);--pos:50%;user-select:none;-webkit-user-select:none;box-shadow:0 24px 60px rgba(28,47,99,.14)}
.compare__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare__img--before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.compare__label{position:absolute;top:14px;padding:5px 12px;border-radius:99px;background:rgba(28,47,99,.85);color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.compare__label--before{left:14px}
.compare__label--after{right:14px}
.compare__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;pointer-events:none}
.compare__knob{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--deep);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.compare__knob svg{width:22px;height:22px}
.compare__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize}

/* ---------- 3. real patient photos ---------- */
/* before / after sliders */
.ba-marquee{overflow-x:auto;overflow-y:hidden;padding:16px 0 50px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ba-marquee::-webkit-scrollbar{display:none}
.ba-wrap{position:relative}
.ba-marquee{cursor:grab}
.ba-marquee.is-model{overflow:hidden;touch-action:pan-y}
.ba-marquee.is-model .ba-grid{will-change:transform}
.ba-marquee.is-grabbing{cursor:grabbing;user-select:none;-webkit-user-select:none}
.ba-marquee img{-webkit-user-drag:none;user-select:none}
.ba-grid{display:flex;gap:22px;width:max-content}
.ba-arrow{display:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button,a,[role=button],summary{touch-action:manipulation}
.ba{flex:none;width:400px;margin:0;padding:10px;border-radius:24px;background:#fff;box-shadow:0 0 0 2px rgba(46,227,197,.35),0 18px 40px rgba(28,47,99,.08)}
.ba__view{--pos:50%;position:relative;aspect-ratio:750/530;border-radius:16px;overflow:hidden;background:var(--sky);user-select:none;-webkit-user-select:none}
.ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba__img--before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba__tag{position:absolute;top:12px;left:12px;padding:5px 11px;border-radius:99px;background:rgba(28,47,99,.78);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.ba__tag--after{left:auto;right:12px;background:var(--grad);color:var(--deep)}
.ba__view::after{content:"";position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.25);pointer-events:none}
.ba__handle{position:absolute;z-index:1;top:50%;left:var(--pos);display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;color:var(--blue);box-shadow:0 6px 18px rgba(28,47,99,.3);pointer-events:auto;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:ew-resize}
.ba__handle svg{width:20px;height:20px}
.ba__range{position:absolute;inset:0;z-index:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none;-webkit-appearance:none;appearance:none}
.ba__range::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:400px}
.ba__range:focus-visible+*,.ba__view:has(.ba__range:focus-visible) .ba__handle{outline:3px solid var(--teal);outline-offset:3px}
.ba figcaption{padding:14px 8px 6px}
.ba figcaption b{display:block;font-size:17px;color:var(--deep)}
.ba figcaption span{font-size:14px;color:var(--muted)}
.smiles__cta{text-align:center;margin-top:0}

/* ---------- footer: gradient band + slim dark footer ---------- */
.footer{background:var(--deep);color:rgba(255,255,255,.82);font-size:14px;text-align:left}
.footer a{color:#fff}
.footer__main{padding:48px 0 24px}
.footer__row{display:grid;grid-template-columns:1.3fr repeat(3,minmax(0,1fr));gap:32px}
.footer .logo img{height:40px;filter:brightness(0) invert(1)}
.footer__contact{display:grid;gap:12px;margin:20px 0 0;padding:0;list-style:none;line-height:1.5}
.footer__contact li{display:flex;gap:12px;align-items:flex-start}
.footer__contact svg{flex:none;width:17px;height:17px;margin-top:3px;color:var(--teal)}
.footer__contact a{font-weight:700}
.footer__contact a:hover,.footer__loc a:hover{color:var(--teal)}
.footer__loc h3{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.footer__loc a{display:block;transition:color .2s}
.footer__loc .addr{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px;line-height:1.6;color:rgba(255,255,255,.85)}
.footer__loc .addr svg{flex:none;width:17px;height:17px;margin-top:3px;color:var(--teal)}
.footer__loc .tel{display:flex;align-items:center;gap:8px;font-weight:700}
.footer__loc .tel svg{flex:none;width:17px;height:17px;color:var(--teal)}
.footer .socials{display:flex;gap:10px}
.footer .socials a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);transition:background .2s,color .2s}
.footer .socials a:hover{background:var(--teal);color:var(--deep)}
.footer .socials svg{width:17px;height:17px}
.footer__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}
.footer__copy{margin:0;font-size:12.5px;opacity:.7}
@media(max-width:991px){.footer__row{grid-template-columns:repeat(2,minmax(0,1fr))}.footer__brand{grid-column:1/-1}}
@media(max-width:560px){.footer__row{grid-template-columns:minmax(0,1fr);gap:26px}}

/* ---------- sticky mobile bar ---------- */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:10px;align-items:center;padding:10px 14px;background:#fff;border-top:1px solid var(--line)}
.mbar__call{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--deep);color:#fff}
.mbar__call svg{width:20px;height:20px}
.mbar .btn{flex:1;white-space:nowrap}

/* ---------- question flow: "glass cards" (option 6) ---------- */
.flow{width:min(620px,calc(100% - 24px));max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);margin:auto;padding:24px 26px 20px;border:1px solid rgba(255,255,255,.7);border-radius:30px;background:rgba(255,255,255,.88);color:var(--deep);box-shadow:0 40px 100px rgba(8,16,40,.45);overflow:auto}
.flow::backdrop{background:rgba(18,30,66,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.flow[open]{animation:flowIn .4s var(--ease)}
@keyframes flowIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.flow__top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.ring{position:relative;flex:none;width:52px;height:52px}
.ring svg{width:52px;height:52px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:5}
.ring__t{stroke:#cfcfcf}
.ring__b{stroke:url(#ring-g);stroke-linecap:round;transition:stroke-dashoffset .5s var(--ease)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:var(--deep)}
.flow.is-direct .ring,.flow.is-direct #flow-back{display:none}
.flow__meta{flex:1;min-width:0}
.flow__meta small{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-d)}
.flow__meta span{font-weight:700;font-size:14px;color:var(--muted)}
.flow__icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--deep);transition:background .2s,opacity .2s}
.flow__icon:hover{background:var(--sky-2)}
.flow__icon svg{width:18px;height:18px}
.flow__icon[disabled]{opacity:.35;cursor:default}
.page{display:none}
.page.is-on{display:block;animation:flip .4s var(--ease)}
.page.is-back{animation-name:flipBack}
@keyframes flip{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes flipBack{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
.page__q{font-size:clamp(23px,3.4vw,30px);line-height:1.18;letter-spacing:-.025em}
.page__help{margin:8px 0 20px;color:var(--muted);font-size:15px}

/* answer cards */
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:18px 44px 18px 16px;border:1.5px solid var(--line);border-radius:20px;background:#fff;text-align:left;transition:transform .25s var(--ease),border-color .2s,box-shadow .25s}
.choice:hover{transform:translateY(-3px);border-color:#B9D7F2;box-shadow:0 14px 30px rgba(56,91,178,.12)}
.choice__ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#EEF6FF;color:var(--blue);transition:background .2s,color .2s}
.choice__ic svg{width:24px;height:24px}
.choice__txt b{display:block;font-size:16px;line-height:1.3;color:var(--deep)}
.choice__txt small{display:block;margin-top:2px;font-size:13px;font-weight:500;color:var(--muted)}
.choice::after{content:"";position:absolute;top:14px;right:14px;width:24px;height:24px;border-radius:50%;border:2px solid #CFD8EA;transition:border-color .2s}
.choice.is-picked{border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;box-shadow:0 4px 8px rgba(46,227,197,.25)}
.choice.is-picked .choice__ic{background:var(--grad);color:#fff}
.choice.is-picked::after{border:0;box-shadow:0 4px 10px rgba(46,227,197,.35);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat,var(--grad);animation:tick .3s ease}
@keyframes tick{0%{transform:scale(.4)}70%{transform:scale(1.15)}100%{transform:none}}
.choice--wide{grid-column:1/-1;flex-direction:row;align-items:center}

/* form page: floating labels */
.fl{position:relative;margin-bottom:12px}
.fl input{width:100%;padding:22px 16px 8px;border:1.5px solid #c3cee5;border-radius:14px;background:#fff;color:var(--deep);font:inherit;font-size:16px;outline:none;transition:border-color .2s,box-shadow .2s}
.fl label{position:absolute;left:16px;top:16px;font-size:15px;color:var(--muted);pointer-events:none;transition:top .2s,font-size .2s,color .2s}
.fl input:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(46,227,197,.18)}
.fl input:focus+label,.fl input:not(:placeholder-shown)+label{top:7px;font-size:11.5px;font-weight:700;color:var(--teal-d)}
.field.is-invalid input{border-color:var(--err)}
.field.is-invalid::after{content:attr(data-err);display:block;margin-top:4px;color:var(--err);font-size:12.5px}
.consent{display:flex;gap:10px;align-items:flex-start;margin:4px 0 18px;font-size:13px;color:var(--muted);line-height:1.5}
.consent input{flex:none;margin-top:0;width:18px;height:18px;accent-color:var(--blue)}
.consent.is-invalid{color:var(--err)}
.status{margin-top:8px;font-size:14px;text-align:center}
.status:empty{display:none}

/* phone verification (SMS code) */
.phone .fl input{padding-right:104px}
.phone .fl input{height:54px}
.phone__btn{position:absolute;top:7px;right:8px;min-width:80px;height:40px;padding:0 18px;border:0;border-radius:8px;background:var(--blue);color:#fff;font-weight:800;font-size:14px;text-align:center;box-shadow:none;transition:background .2s,color .2s,transform .2s var(--ease)}
.phone__btn:hover:not([disabled]){background:var(--blue-d);transform:scale(1.04)}
.phone__btn[disabled]{background:#EEF2FB;color:#9AA6BF;cursor:not-allowed}
.phone.is-verified .phone__btn{display:none}
.phone.is-verified .fl input{padding-right:16px;border-color:#2BB673;background:#F3FCF7}
.phone__ok{display:flex;align-items:center;gap:6px;margin:-4px 0 10px;font-size:13px;font-weight:700;color:#1B8A55}
.phone__ok[hidden]{display:none}
.phone__ok svg{width:16px;height:16px;stroke-width:3}
.otp{margin:-2px 0 12px;padding:14px;border-radius:16px;background:#F3F7FF;border:1.5px solid #D5E0F5;animation:flip .35s var(--ease)}
.otp[hidden]{display:none}
.otp__msg{font-size:13.5px;line-height:1.45;color:var(--deep)}
.otp__link{padding:0;border:0;background:none;color:var(--blue);font-weight:800;font-size:13px;text-decoration:underline;text-underline-offset:2px}
.otp__boxes{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:12px 0 8px}
.otp__boxes input{width:100%;min-width:0;height:50px;padding:0;border:1.5px solid #c3cee5;border-radius:12px;background:#fff;color:var(--deep);font:800 22px "Plus Jakarta Sans",sans-serif;text-align:center;outline:none;transition:border-color .2s,box-shadow .2s}
.otp__boxes input:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(46,227,197,.18)}
.otp__boxes.is-bad input{border-color:var(--err);animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.otp__meta{font-size:13px;color:var(--muted)}
.otp__err{min-height:0;font-size:13px;font-weight:600;color:var(--err)}
.otp__err:empty{display:none}
.page--form.is-otp .reviews{display:none}
.status.is-error{color:var(--err)}

/* desktop: compact form page so the whole modal fits without scrolling */
@media (min-width:768px){
  .flow{scrollbar-width:none}
  .flow::-webkit-scrollbar{display:none}
  .page--form .page__help{margin-bottom:16px}
  .page--form .fl{margin-bottom:10px}
  .page--form .consent{margin:2px 0 14px}
  .page--form .reviews{grid-template-columns:1fr 1fr;gap:10px;margin-top:0;padding-top:14px}
  .page--form .review{gap:10px;padding:12px}
  .page--form .review__av{width:34px;height:34px;font-size:14px}
  .page--form .review blockquote{font-size:13.5px;line-height:1.4}
  .flow:has(.page--form.is-on) .flow__trust{margin-top:14px;padding-top:12px}
}

/* trust line under every page */
.flow__trust{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;font-weight:600;color:var(--muted)}
.flow__trust span{display:inline-flex;align-items:center;gap:6px}
.flow__trust svg{width:15px;height:15px;color:var(--teal-d)}

/* reviews under the form */
.reviews{display:grid;gap:12px;margin-top:0;padding-top:18px;border-top:1px solid var(--line)}
.review{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--r);background:var(--sky-2)}
.review__av{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800}
.review__stars{color:var(--gold);letter-spacing:2px;font-size:14px}
.review blockquote{font-size:14.5px;font-weight:600;color:var(--ink);margin:2px 0}
.review figcaption{font-size:12.5px;color:var(--muted)}


/* ---------- accent colours (from the BiteBot simulator) ---------- */
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{color:var(--teal-d)}
.sim .eyebrow{color:var(--teal)}
.ask__kicker{border-color:var(--teal);color:var(--teal-d)}
.ask__kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(46,227,197,.25)}
.sim__frame.is-fallback{box-shadow:0 0 0 2px rgba(46,227,197,.55),0 24px 60px rgba(0,0,0,.3)}
.smiles{background:var(--cream)}
.review{background:#fff7ed;border:1px solid #ddd1c3}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* tablets: the photo's light left side gets too narrow, so a soft light fade keeps the question readable */
@media(min-width:768px) and (max-width:1199px){
  .hero{min-height:560px}
  .hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#EAF1FA 0%,rgba(234,241,250,.92) 42%,rgba(234,241,250,0) 72%)}
  .ask__q{max-width:520px}
}
@media(max-width:991px){
  .sim__grid{grid-template-columns:1fr}
  .header__phone span{display:none}
}
@media(max-width:767px){
  .header__in{height:66px}
  .logo img{height:38px}
  .header .btn{display:none}
  .header__phone span{display:inline}
  /* smile photo stays in the background; the question sits on a soft fade over its lower part */
  .hero{min-height:0;display:flex;flex-direction:column;justify-content:flex-end}
  .hero__img{object-position:84% 20%}
  .hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(234,241,250,0) 18%,rgba(234,241,250,.82) 40%,#EAF1FA 58%)}
  .hero .hero__in{padding-top:min(210px,48vw);padding-bottom:32px}
  .ask__q{font-size:32px;margin-bottom:22px}
  .ans{flex:1 1 0;min-width:0;gap:10px;padding:8px 10px 8px 8px;font-size:16px}
  .ans__face{width:40px;height:40px}
  .ans__txt small{font-size:11.5px}
  .mbar{display:flex}
  body{padding-bottom:74px}
  .flow{width:100%;max-width:none;max-height:100dvh;height:100dvh;margin:0;border-radius:0;padding:8px 18px 20px}
  .choices{grid-template-columns:1fr}
  .choice{flex-direction:row;align-items:center}
}
@media(max-width:479px){
  .container{padding:0 16px}
  .section{padding:48px 0}
  .btn--lg{padding-right:62px;font-size:15px}
  .drop{padding:16px}
  .mbar .btn{min-width:0;padding-left:18px}
  .header__phone{font-size:14px;white-space:nowrap}
}
/* very small phones (≤360px): keep everything on one line and stack the hero answers */
@media(max-width:360px){
  .header__phone span{display:none}
  .header__phone{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--sky)}
  .ask__q{font-size:28px}
  .ask__kicker{font-size:11px;padding:6px 11px;gap:6px;letter-spacing:-.01em}
  .ans{flex:1 1 100%}
  .mbar .btn{font-size:14px;padding:8px 50px 8px 14px}
  .mbar .btn::after{width:30px;height:30px;right:7px}
  .flow__meta small{font-size:11px;letter-spacing:.06em}
  .flow__top{gap:10px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .reveal{opacity:1;transform:none}
}
@media (max-width:991px){
  .ba-grid{gap:14px}
  .ba{width:290px}
}
@media (prefers-reduced-motion:reduce){
  .ba-marquee{-webkit-mask-image:none;mask-image:none}
  .ba-grid{padding:0 16px}
}
@media (pointer:coarse){
  .ba__handle{width:50px;height:50px;margin:-25px 0 0 -25px}
}

/* phones: one photo at a time, arrows and autoplay only (no finger swipe on the row; the round handle still drags) */
@media (max-width:767px){
  .ba-marquee{cursor:auto;overflow-x:hidden;touch-action:pan-y;mask-image:none;-webkit-mask-image:none;scroll-snap-type:x mandatory;scroll-padding-inline:16px;padding-bottom:30px}
  /* one photo fills the width, so the neighbouring cards never peek in from the sides */
  .ba-grid{padding:0 max(16px,calc((100vw - 560px)/2));gap:max(24px,calc((100vw - 560px)/2 + 8px))}
  .ba{width:min(calc(100vw - 32px),560px);scroll-snap-align:center;scroll-snap-stop:always}
  .ba[aria-hidden="true"]{display:none}
  .ba-wrap{padding-bottom:44px}
  .ba-marquee{padding-bottom:34px}   /* room for the card shadow, which the scrolling row would otherwise cut off */
  .ba{box-shadow:0 0 0 2px rgba(46,227,197,.35),0 10px 22px rgba(28,47,99,.12)}
  .smiles__cta{margin-top:26px}
  .ba-arrow{display:grid;place-items:center;position:absolute;z-index:3;bottom:4px;width:46px;height:46px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--deep);box-shadow:0 6px 18px rgba(28,47,99,.22),0 0 0 1.5px rgba(46,227,197,.45);transition:opacity .2s,transform .2s}
  .ba-arrow svg{width:20px;height:20px;stroke-width:2.6}
  .ba-arrow--prev{left:calc(50% - 55px)}
  .ba-arrow--next{left:calc(50% + 9px)}
  .ba-arrow--next svg{transform:scaleX(-1)}
  .ba-arrow[disabled]{opacity:.35;pointer-events:none}
  .ba-arrow:active{transform:scale(.92)}
}

/* live-height simulator: the widget card sits directly on the section, not inside a second framed box */
.sim__frame.is-live{background:transparent;box-shadow:none;border-radius:0;overflow:visible}

/* booking form: LeadsMagnet iframe (form_embed.js sets its height, so it never scrolls inside itself) */
.ghl{position:relative;min-height:480px}
.ghl iframe{display:block;width:100%;min-height:480px;border:0}
.ghl__loading{position:absolute;inset:0;z-index:1;overflow:hidden;padding:28px 24px;border-radius:8px;background:#fff;pointer-events:none}
.ghl__loading>div{display:grid;gap:10px}
.sk--label{width:34%;height:14px;margin-top:8px}
.sk--input{height:46px;border-radius:8px}
.sk--pill{height:46px;border-radius:12px}
.ghl.is-ready .ghl__loading{display:none}

/* ---------- hero: the question on a frosted glass sheet over the full smile photo (phone and desktop) ---------- */
.hero__in{display:flex;flex-direction:column;align-items:flex-start}
.hero .ask__kicker{margin-bottom:16px}
.ask{max-width:560px;padding:32px;border-radius:28px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);box-shadow:0 20px 50px rgba(28,47,99,.16),inset 0 0 0 1px rgba(255,255,255,.7)}
.ask__q{margin-bottom:22px;font-size:clamp(34px,3.6vw,48px)} /* 3 lines inside the sheet on desktop */
.ask .ans{box-shadow:0 6px 16px rgba(28,47,99,.1)}
.ask__meta{margin-top:16px}
@media(min-width:768px) and (max-width:1199px){.hero::after{display:none}}
@media(max-width:767px){
  /* the photo fills the first screen (minus header and bottom bar); address on top, sheet at the bottom */
  .hero{min-height:calc(100vh - 140px);min-height:calc(100svh - 140px);justify-content:stretch}
  .hero::after{display:none}
  .hero__img{object-position:82% 40%}
  .hero .hero__in{flex:1;justify-content:space-between;padding-top:16px;padding-bottom:16px}
  .hero .ask__kicker{margin-bottom:0}
  .ask{width:100%;max-width:none;margin-top:24px;padding:22px 18px 20px;border-radius:28px;background:rgb(255 255 255 / 63%)}
  .ask__q{font-size:30px;margin-bottom:18px}
  .ask__answers{flex-direction:column;gap:10px}
  .ans{flex:none;width:100%;min-height:66px;padding:10px 14px;border-radius:18px}
}

/* hero text: promise, "Takes 30 seconds!", then one question */
.pill-free{display:inline;padding:0 .2em;border-radius:.26em;background:var(--grad);color:#fff;line-height:1.5;box-decoration-break:clone} /* highlighted words in the hero heading */
.ask__time{margin:-10px 0 18px;font-size:16px;font-weight:600;line-height:1.45;color:var(--blue)}
.ask__ask{margin:10px 0 16px;font-size:24px;font-weight:800;line-height:1.25;color:var(--blue)}
@media(max-width:767px){
  .ask__q{font-size:30px;margin-bottom:12px}
  .ask__ask{font-size:19px;margin-bottom:14px}
}

/* GHL survey page: the survey draws its own ring, title and trust line, so only the close button stays, top right */
.flow.is-survey .ring,.flow.is-survey #flow-back,.flow.is-survey .flow__meta,.flow.is-survey .flow__trust{display:none} /* the survey has its own trust line */
.flow.is-survey .flow__top{position:absolute;z-index:3;top:30px;right:26px;margin:0}
.ghl--survey{min-height:0}
.ghl--survey:not(.is-ready){min-height:420px}
.ghl--survey iframe{min-height:0}
.ghl--survey .ghl__loading{padding:0;background:transparent;border-radius:0}
.skq__top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.skq__ring{width:52px;height:52px;border-radius:50%}
.skq__head{display:grid;gap:8px;width:170px}
.skq__head .sk--label{width:70%;margin:0}
.skq__line{height:14px}
.skq__title{height:32px;width:88%}
.skq__help{height:14px;width:42%;margin-top:12px}
.skq__cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.skq__card{height:118px;border-radius:20px}
@media(max-width:767px){
  .flow.is-survey .flow__top{top:25px;right:18px}
  .skq__cards{grid-template-columns:1fr}
  .skq__card{height:86px}
}

/* survey frame: hidden behind a clearly visible skeleton until the questions are drawn; no scrollbars anywhere in the modal */
.ghl--survey iframe{transition:opacity .25s}
.ghl--survey:not(.is-ready) iframe{opacity:0!important;min-height:420px;pointer-events:none} /* !important: GHL's embed script sets an inline opacity */
.ghl--survey .skel{--sk-a:rgba(28,47,99,.08);--sk-b:rgba(28,47,99,.17)}
.flow{scrollbar-width:none;-ms-overflow-style:none}
.flow::-webkit-scrollbar{display:none}

/* hero location line: red pin, bold navy text, the three clinic cities in the brand gradient */
.ask__kicker--loc{color:var(--deep);font-weight:800;border-color:var(--line)}
.ask__kicker--loc::before{content:none}
.ask__pin{flex:none;width:30px;height:30px;fill:#E5484D;stroke:#fff;stroke-width:2}
.ask__kicker--loc b{font-weight:700;background:#385bb2;-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:767px){.ask__kicker--loc{font-size:16px;line-height:1.35;border-radius:16px}}
.ghl--survey.is-ready iframe{min-height:420px} /* never a thin strip, even if a resize report is missed */

/* GHL form in the modal: room at the top for the close button; no scrollbars */
.ghl--gform{padding-top:0;min-height:0}
.ghl--gform:not(.is-ready){min-height:520px}
.ghl--gform iframe{min-height:480px;transition:opacity .25s}
.ghl--gform:not(.is-ready) iframe{opacity:0!important;pointer-events:none}
.ghl--gform .ghl__loading{padding:8px 0}
.ghl--gform .skel{--sk-a:rgba(28,47,99,.08);--sk-b:rgba(28,47,99,.17)}
.gform__title{margin:6px 56px 0 0;font-size:30px;font-weight:800;line-height:1.18;letter-spacing:-.025em;color:var(--deep)}
.gform__help{margin:8px 0 18px;font-size:15px;line-height:24px;color:var(--muted)}
@media(max-width:480px){.gform__title{font-size:23px;margin-right:48px}}
.reviews[hidden]{display:none}
/* modal reviews: side by side on desktop, one under the other on phones */
#flow-reviews{grid-template-columns:repeat(2,minmax(0,1fr))}
#flow-reviews .review{gap:10px;padding:12px}
#flow-reviews .review__av{width:36px;height:36px;font-size:15px}
#flow-reviews .review blockquote{font-size:13.5px;line-height:1.4}
@media(max-width:600px){#flow-reviews{grid-template-columns:1fr}}
.flow.is-survey.has-reviews .flow__trust{display:flex} /* form screens: reviews, then the trust line at the end */

/* iOS / Safari: scrolling inside the modal never moves the page behind it; momentum scrolling in the modal */
.flow{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* Hero answers: two equal cards, so neither looks pre-selected. Last in the file so they win over the layout rules above.
   Pick the look with a class on .ask__answers in index.html:
     ask__answers--tiles  white square tiles: big face on top, the word below, a gradient chip with an arrow (design "A")
     ask__answers--cards  two coloured gradient cards, coral and teal-blue, white text, arrow bottom right (design "C") */
.ask__answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:460px}
.ask .ans{width:auto;min-width:0;min-height:0}

.ask__answers--tiles .ans{display:grid;justify-items:center;align-content:center;gap:10px;padding:20px 10px 16px;border:2px solid var(--line);border-radius:22px;background:#fff;color:var(--deep);font-size:18px;font-weight:800;text-align:center;box-shadow:0 6px 16px rgba(28,47,99,.08)}
.ask__answers--tiles .ans__face{width:58px;height:58px}
.ask__answers--tiles .ans__txt{display:grid;justify-items:center;gap:10px}
.ask__answers--tiles .ans__txt small{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:99px;background:var(--grad);color:#fff;font-size:13px;font-weight:700;opacity:1;white-space:nowrap}
.ask__answers--tiles .ans__txt small::after{content:"\2192";transition:transform .2s var(--ease)}
.ask__answers--tiles .ans:hover{transform:translateY(-4px);border-color:var(--blue);box-shadow:0 14px 28px rgba(56,91,178,.18)}
.ask__answers--tiles .ans:hover .ans__txt small::after{transform:translateX(3px)}
.ask__answers--tiles .ans.is-picked{border-color:var(--blue);box-shadow:0 0 0 3px rgba(56,91,178,.25)}

.ask__answers--cards .ans{position:relative;display:flex;flex-direction:row;align-items:flex-start;gap:12px;padding:16px 16px 18px;border:0;border-radius:20px;color:#fff;font-size:19px;font-weight:800;text-align:left;overflow:hidden;box-shadow:none}
.ask__answers--cards .ans[data-hero-answer="Yes"]{background:linear-gradient(140deg,#ff9a62,#f56b6b)}
.ask__answers--cards .ans[data-hero-answer="Not sure"]{background:linear-gradient(140deg,#2ec7b0,#4a7be0)}
.ask__answers--cards .ans__face{width:46px;height:46px}
.ask__answers--cards .ans__txt small{font-size:13px;font-weight:500;opacity:.9}
.ask__answers--cards .ans::after{content:"\2192";position:absolute;right:16px;bottom:14px;font-size:22px;font-weight:600;line-height:1;transition:transform .2s var(--ease)}
.ask__answers--cards .ans:hover{transform:translateY(-4px);box-shadow:0 8px 15px rgba(28,47,99,.25)}
.ask__answers--cards .ans:hover::after{transform:translateX(4px)}
.ask__answers--cards .ans.is-picked{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--blue)}

@media(max-width:767px){
  .ask__answers{gap:10px}
  .ask__answers--tiles .ans{padding:16px 8px 14px;border-radius:20px;font-size:17px}
  .ask__answers--tiles .ans__face{width:52px;height:52px}
  .ask__answers--tiles .ans__txt small{padding:6px 12px;font-size:12.5px}
  .ask__answers--cards .ans{flex-direction:column;gap:10px;padding:14px 14px 14px;border-radius:18px;font-size:18px} /* phones: face on top, words below, so nothing wraps */
  .ask__answers--cards .ans__face{width:42px;height:42px}
  .ask__answers--cards .ans__txt small{font-size:12.5px}
}
@media(max-width:340px){.ask__answers--tiles .ans__txt small{font-size:11.5px;padding:5px 9px}}

/* Modal: one-line social proof under the question slides */
.flow__proof{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;margin:14px 0 0;font-size:13.5px;color:var(--muted);text-align:center}
.flow__proof b{color:var(--deep)}
.flow__proof-stars{color:#f5b301;letter-spacing:1px;font-size:15px}

.flow__proof[hidden]{display:none}

/* Hero cards: a soft light sweeps across each card in turn and the arrow nudges, so both read as tappable (not as picked) */
.ask__answers--cards .ans::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);pointer-events:none}
.ask__answers--cards .ans > *{position:relative}
@media (prefers-reduced-motion:no-preference){
  .ask__answers--cards .ans::before{animation:ansShine 4s var(--ease) infinite}
  .ask__answers--cards .ans::after{animation:ansArrow 4s var(--ease) infinite}
  .ask__answers--cards .ans__face{animation:ansBob 4s var(--ease) infinite}
  .ask__answers--cards .ans[data-hero-answer="Not sure"]::before,
  .ask__answers--cards .ans[data-hero-answer="Not sure"]::after,
  .ask__answers--cards .ans[data-hero-answer="Not sure"] .ans__face{animation-delay:2s}
  .ask__answers--cards .ans.is-picked::before,.ask__answers--cards .ans.is-picked::after,.ask__answers--cards .ans.is-picked .ans__face{animation:none}
}
@keyframes ansShine{0%{left:-60%}35%,100%{left:130%}}
@keyframes ansArrow{0%,8%,40%,100%{transform:none}18%{transform:translateX(6px)}28%{transform:translateX(1px)}}
@keyframes ansBob{0%,8%,40%,100%{transform:none}18%{transform:translateY(-4px) rotate(-8deg)}28%{transform:rotate(4deg)}}

/* Smile simulator: the container has no side padding, so the widget runs edge to edge; only the heading block keeps it */
.sim > .container{padding-left:0;padding-right:0}
.sim .section__head{padding-left:20px;padding-right:20px}
@media(max-width:767px){.sim .section__head{padding-left:16px;padding-right:16px}}

/* the booking survey draws its own title and subtitle; ours stays only as the dialog label */
.gform__title.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* phone: less empty space above the survey/form title inside the modal */
@media(max-width:479px){
  .flow.is-survey{padding-top:19px}
  .flow.is-survey .ghl{margin-top:-6px}
}

@media (max-width: 620px) {
  .flow.is-survey .flow__top {
    top: 14px;
  }
}

@media (max-width: 480px) {
  .flow.is-survey .flow__top {
    top: 19px;
  }
}