/* Revive BR landing page. Layout, sizes and colors follow the Patient Pilot
   reference page measured at 1280px and 375px wide. Recreated, not copied. */
:root{--teal:#31ccb8;--pink:#a81e5d;--magenta:#a71d5c;--red:#e93d3d;--rule:#efe8d8;--ink:#000;--warm:#fbf9f6;--sans:'Open Sans',Arial,sans-serif;--display:Poppins,Arial,sans-serif;--form:Roboto,Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{margin:0;color:var(--ink);font-family:var(--sans);background:#fff linear-gradient(#000000b3,#000000b3) center/cover no-repeat fixed;background-image:linear-gradient(#000000b3,#000000b3),url('/revive-assets/reference-background.webp')}
h1,h2,h3,p,figure,blockquote{margin:0}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #15776e;outline-offset:4px}
button:hover{filter:brightness(1.06)}
body.modal-open{overflow:hidden}
[hidden]{display:none!important}

/* Font Awesome Free 5 glyphs, inlined as SVG (sized like the icon font). */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.fa{display:inline-block;height:1em;overflow:visible;vertical-align:-.125em;margin-right:5px}
.fa-w-12{width:.75em}.fa-w-14{width:.875em}.fa-w-16{width:1em}
.check{color:var(--teal)}

.page-shell{max-width:960px;margin:auto;background:#fff;text-align:center;overflow:hidden}

/* Header: logo left, address right; beige rule like every reference section. */
.clinic-header{display:grid;grid-template-columns:1fr 1fr;align-items:start;padding:20px 0;border-bottom:1px solid var(--rule)}
.logo-column{display:flex;justify-content:center;padding-top:10px}
.logo-column img{display:block;width:auto;height:75px;object-fit:contain}
.clinic-address{margin-top:21px;font-size:16px;line-height:1.3}
.clinic-address h2{font:inherit;font-weight:500}

/* Hero */
.hero{padding:30px 20px 15px 15px;border-bottom:1px solid var(--rule)}
.hero h1{font:700 50px/1.1 var(--display);text-transform:capitalize}
.hero-subhead{margin-top:10px;font-size:20px;line-height:1.3}
.image-frame{margin-top:5px;padding:10px}
.framed-image{display:block;width:100%;height:auto;padding:1px;border:1px solid rgba(0,0,0,.35);border-bottom-width:2px;background:#fff;box-shadow:0 2px 5px 2px rgba(0,0,0,.3)}
.hero-price{margin-top:5px}
.normally{font-size:26px;line-height:1.3}
.normally em{color:var(--red)}
.intro-label{margin-top:5px;font-size:28px;line-height:1.3}
.price{font:700 80px/1.3 var(--display);color:var(--teal)}

/* Buttons: auto-width magenta blocks, main line plus a 15px sub line. */
.claim-button{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;max-width:100%;padding:10px 40px;border:0;border-radius:10px;background:var(--pink);color:#fff;font-weight:700;line-height:normal;text-align:center;vertical-align:top}
.claim-button .cta-main{display:block;padding-left:5px;font-size:26px}
.claim-button .cta-icon{margin:0 0 0 5px}
.claim-button small{display:block;font:400 15px/normal ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;opacity:.8}
.first-claim{margin-top:10px;border:1px solid transparent;font-family:var(--display);box-shadow:0 1px 5px rgba(0,0,0,.7)}
.glow-claim{font-family:Arial,sans-serif;box-shadow:0 0 25px rgba(0,0,0,.4),0 0 15px rgba(255,255,255,.2),0 0 3px rgba(255,255,255,.4)}

/* Daily countdown: three plain columns, no boxes. */
.offer-timing{margin:20px auto 0}
.offer-countdown{display:grid;grid-template-columns:repeat(3,100px);justify-content:center;font-family:var(--display)}
.offer-countdown>div{display:grid;text-align:center}
.offer-countdown .count{font-size:32px;line-height:1.5;font-weight:400;font-variant-numeric:tabular-nums}
.offer-countdown .label{font-size:15px;line-height:1.5;font-weight:300}

/* Offer stack */
.offer-includes{padding:30px 20px 30px;border-bottom:1px solid var(--rule)}
.offer-includes h2{font:700 40px/1.3 var(--display);text-transform:capitalize}
.include-items{width:100%;max-width:728px;margin:15px auto 0}
.include-item+.include-item{margin-top:15px}
.include-item h3{font:700 26px/1.3 var(--sans);text-transform:uppercase}
.include-item>p{font-size:20px;line-height:1.3;margin-top:5px}
.include-item>p.included{margin:0;font:500 20px/1.3 var(--display)}
/* The reference sets the first two descriptions at 500, the last two at 400. */
.include-item:nth-child(-n+2)>p:not(.included){font-weight:500}
.included strong{color:var(--magenta)}
.included em{color:var(--ink)}
.repeat-price{margin-top:20px}
.repeat-normally{font-size:32px;line-height:1.3;font-weight:500}
.repeat-normally strong{color:var(--red)}
.repeat-today{margin-top:5px;font:400 48px/1.3 Prompt,var(--sans)}
.repeat-today strong{color:var(--teal);font-weight:700}
.offer-includes>.claim-button{margin-top:15px}

/* Treatment education */
.treatment{background:var(--warm);padding:20px 30px 25px}
.treatment h2{font:700 40px/1.3 var(--display);max-width:870px;margin:auto;text-transform:capitalize}
.treatment-copy{max-width:718px;margin:20px auto 0;text-align:left;font-size:20px;line-height:1.3}
.benefits{list-style:none;padding:0;margin:20px 0 0}
.benefits li{font-weight:500;line-height:1.3;text-transform:capitalize}
.benefits li+li{margin-top:10px}
.treatment-image{margin:10px -10px 0}
.treatment-cta-heading{font:700 26px/1.3 var(--sans);text-transform:capitalize;margin:18px -5px 15px}

/* Location + map */
.location{padding:20px 5px 5px}
.location-address{font:700 24px/1.3 var(--display);margin:0 15px 15px}
.location iframe{display:block;width:100%;height:500px;border:0;background:#f7f7f7}

/* Real Client Results */
.reviews{padding:20px 55px 41px;border-bottom:1px solid var(--rule)}
.reviews h2{font:700 48px/1.3 var(--display);margin:0 -10px;text-transform:capitalize}
.result-grid{display:grid;grid-template-columns:370px 370px;justify-content:space-between;gap:30px}
.result-grid img,.testimonial-images img{display:block;width:100%;height:auto;border:0}
.testimonial-images img{max-width:447px;margin:0 auto}
.testimonial-images{display:grid;grid-template-columns:370px 370px;justify-content:space-between;gap:30px;margin-top:40px}
@media(min-width:768px){.result-grid{grid-template-rows:366.333px 246.667px}.result-grid img:nth-child(2){transform:translateY(3.167px)}.result-grid img:nth-child(4){transform:translateY(16.958px)}.testimonial-images img:nth-child(2){transform:translateY(5px)}}

/* FAQ: separated cards, chevron on the left, every card toggles alone. */
.faq{padding:30px 30px 48px}
.faq h2{font:700 42px/1.3 var(--display);margin-bottom:19px;white-space:nowrap;text-transform:capitalize}
.faq-list{text-align:left}
.faq details{border:1.5px solid var(--pink);border-radius:10px;background:#fff;margin-bottom:10px}
.faq summary{display:flex;align-items:center;padding:15px;font:400 20px/30px Oswald,Arial,sans-serif;color:#111827;cursor:pointer;list-style:none}
.faq summary strong{font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary .fa{flex:0 0 14px;width:14px;height:16px;margin-right:16px;color:#111827;vertical-align:0}
.faq details .faq-up,.faq details[open] .faq-down{display:none}
.faq details[open] .faq-up{display:inline-block}
.faq details p{font-size:15px;line-height:1.5;padding:0 15px}
.faq details p:last-child{padding-bottom:18px}

/* Footer: full-bleed black band. */
.site-footer{background:#000;color:#fff;text-align:center;padding:35px 20px 25px}
.footer-inner{max-width:1130px;margin:auto;font-size:14px;line-height:1.3}
.footer-address{font-size:16px;line-height:1.3}
.footer-address h2{font:inherit;font-weight:500}
.footer-inner>*+*{margin-top:20px}
.footer-links{font-weight:700}
.site-footer a{color:inherit;font-weight:700;text-decoration:none}

/* Step 1 popup: white panel 90px below the top (84px on phones), scrolling
   with its content. Spacing inside it is the reference popup's, measured with
   its form rendered: 76px from the heading to "First Name", 33px above the
   button, and 145px of white space between the button and the secure line. */
.claim-dialog{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:90px 0 40px;border:0;border-radius:0;box-shadow:none;background:transparent;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;color:#000;text-align:center}
.claim-dialog::backdrop{background:rgba(0,0,0,.5)}
.claim-panel{position:relative;width:720px;max-width:calc(100% - 24px);margin:0 auto;padding:30px 20px 35px;background:#fff;border-radius:25px;text-align:center}
.dialog-close{position:absolute;top:-10px;right:-10px;width:39px;height:39px;padding:0;border:3px solid #fff;border-radius:50%;background:#333;color:#fff;font:28px/33px Arial,sans-serif;box-shadow:0 0 3px #777}
/* A 47px tap target around the 39px visual, which stays the reference size. */
.dialog-close::after{content:'';position:absolute;inset:-7px;border-radius:50%}
.claim-dialog .modal-logo{display:block;width:58px;height:75px;margin:0 auto 20px;object-fit:contain}
.claim-dialog #claim-title{font:700 20px/1.1 var(--sans);text-transform:capitalize}
#preview-form{max-width:509px;margin:76px auto 0;text-align:left;font-family:var(--form)}
#preview-form>label{display:block;margin:17px 0 0;font:400 14px/25.2px var(--form)}
#preview-form>label:first-child{margin-top:0}
#preview-form input:not([type=checkbox]){display:block;width:100%;height:51px;margin-top:8px;padding:15px 20px;border:0;border-radius:5px;background:#f7fafc;color:#000;font:400 14px/21px var(--form)}
#preview-form input:focus{outline:2px solid var(--teal);outline-offset:1px}
#preview-form input::placeholder{color:#afb8bc}
#preview-form .input-shell{display:block;position:relative;margin-top:8px}
#preview-form .input-shell input{margin-top:0}
#preview-form .email-shell input{padding-left:36px}
.email-icon{position:absolute;left:13px;top:19px;width:14px;height:12px;color:#adb5ba;pointer-events:none}
#preview-form .phone-shell input{height:55px;padding-left:50px}
/* Flag 9px in, then a small caret, like the reference's country selector. It
   is decorative: the form takes US numbers only. */
.country-prefix{position:absolute;left:9px;top:0;height:55px;display:flex;align-items:center;pointer-events:none}
.us-flag{display:block;width:20px;height:11px;box-shadow:0 0 1px #777}
.country-caret{width:0;height:0;margin-left:6px;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}
#preview-form .modal-submit{display:flex;width:100%;height:47px;min-width:0;margin-top:33px;padding:0 10px;border:0;border-radius:6px;box-shadow:none;background:var(--pink);color:#fff;font:900 14px/21px var(--form)}
#preview-form .modal-submit:disabled{cursor:progress;opacity:.8}
.secure-note{margin-top:145px;text-align:center;font:700 12px/1.3 var(--sans);color:#000}
#preview-form label.consent{display:flex;align-items:flex-start;gap:10px;margin-top:18px;font:400 11px/16.5px var(--form)}
.consent input{flex-shrink:0;width:16px;height:16px;margin:2px 0 0;accent-color:var(--pink)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Phones: one column, 10px gutters, reference font sizes. */
@media(max-width:767px){
 body{background:#fff}
 .page-shell{max-width:none}
 .clinic-header{display:flex;flex-direction:column;align-items:center;padding:20px 10px}
 .clinic-address{margin-top:15px;font-size:13px}
 .hero{padding:30px 10px 15px}
 .hero h1{font-size:26px}
 .hero-subhead{font-size:16px}
 .normally,.intro-label{font-size:18px}
 .price{font-size:60px}
 .claim-button .cta-main{font-size:22px}
 .offer-countdown{grid-template-columns:repeat(3,80px)}
 .offer-countdown .count{font-size:20px}
 .offer-includes{padding:30px 10px}
 .offer-includes h2{font-size:26px}
 .include-item h3{font-size:20px;overflow-wrap:break-word}
 .include-item>p,.include-item>p.included{font-size:16px}
 .repeat-normally{font-size:24px}
 .repeat-today{font-size:32px}
 .treatment{padding:20px 20px 25px}
 .treatment h2{font-size:26px;margin:0 -10px}
 .treatment-copy{font-size:16px}
 .treatment-cta-heading{font-size:20px}
 .location{padding:20px 10px 5px}
 .location-address{font-size:14px;margin:0 -4px 15px}
 .reviews{padding:20px 20px 30px}
 .reviews h2{font-size:26px}
 .result-grid,.testimonial-images{display:flex;flex-direction:column;gap:30px}
 .testimonial-images{margin-top:30px}
 .faq{padding:30px 20px 48px}
 .faq h2{font-size:24px;white-space:normal;margin:0 -10px 19px}
 .faq summary{font-size:15px;line-height:22.5px}
 .faq details p{font-size:12px;line-height:18px}
 .faq details p:last-child{padding-bottom:16px}
 .site-footer{padding:35px 10px 25px}
 .footer-inner,.footer-address{font-size:13px}
 .footer-links,.footer-inner>p:last-child{font-size:14px}
 /* Same 19px-tall text, a 44px-tall tap target. */
 .footer-links a{display:inline-block;padding:12px 4px;margin:-12px 0}
 .claim-dialog{padding-top:84px}
 .claim-panel{width:380px;max-width:calc(100% - 10px);padding:30px 16px 30px}
 .claim-dialog .modal-logo{margin-bottom:20px}
 .secure-note{font-size:10px}
 #preview-form input:not([type=checkbox]),#preview-form .input-shell{margin-top:9px}
 #preview-form .input-shell input{margin-top:0}
 /* The reference's phone form is a 238px column centered in the panel. The
    SMS consent below it keeps the panel's full width so it stays readable. */
 #preview-form>label:not(.consent),#preview-form .modal-submit,#preview-form .form-error{max-width:238px;margin-left:auto;margin-right:auto}
 #preview-form label.consent{font-size:12px;line-height:18px}
 #preview-form .consent input{width:20px;height:20px}
}
@media(max-width:360px){.location-address{margin:0 0 15px}}
