/* PBgif site: the brand tour's own styles (tour.css) plus the few pieces the website adds. */
@font-face{font-family:"Fredoka";src:url("fonts/Fredoka.woff2") format("woff2");font-weight:500 700;font-display:swap}
@font-face{font-family:"Nunito";src:url("fonts/Nunito.woff2") format("woff2");font-weight:200 1000;font-display:swap}

.hero .lg img{width:min(62vw,260px);height:auto;filter:drop-shadow(0 16px 20px rgba(0,0,0,.35))}
.hero.small{padding-top:40px;padding-bottom:48px;gap:16px}
.hero.small .lg img{width:min(36vw,140px)}

/* The phone with the PBgif playing in it */
.mock{position:relative;width:240px;max-width:100%;align-self:center;border-radius:30px;box-shadow:0 12px 28px rgba(59,42,26,.25)}
.mock>img{width:100%;height:auto;display:block;border-radius:30px}
.mock video{position:absolute;left:13.64%;top:32.16%;width:72.95%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}

.card .note{font-size:15px;color:var(--ink-soft);text-align:center}
.card .price{font-family:var(--display);font-weight:700;font-size:22px}

/* Contact form */
.form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:800}
.form input[type=text],.form input[type=email],.form textarea{width:100%;font:inherit;font-size:17px;padding:11px 14px;border:2px solid var(--ink-soft);border-radius:12px;background:var(--white);color:var(--ink);text-transform:none;min-height:48px;box-sizing:border-box}
.form textarea{min-height:150px;resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--grape)}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form button.play{margin-top:4px}
.saved{display:none;align-items:center;gap:12px;background:var(--ink);color:var(--white);border-radius:14px;padding:12px 16px}
.saved.show{display:flex}
.oops{display:none;flex-direction:column;align-items:center;gap:10px;text-align:center}
.oops.show{display:flex}

/* Footer links */
.end .links{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.end .links a{color:var(--white);font-weight:800;text-underline-offset:4px}
.end small{color:var(--lav-light);font-size:14px}
.end .lg img{width:120px;height:auto}

/* Links: Grape Jelly, underlined, with an arrow. Buttons made from links don't get the underline. */
a.play,a.start,a.next{text-decoration:none}
.card a:not(.next):not(.play):not(.start){color:var(--grape);text-underline-offset:3px}
.card a:not(.next):not(.play):not(.start):hover{color:var(--grape-dark)}