/* Ex's Tears — approved layout. Component rules are grouped here; signup chrome
   is in signup.css. Header and bottle share the same sizing variables. */
@font-face { font-family:"Benguiat Book"; src:url("assets/BenguiatStd-Book.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Helvetica Neue Condensed"; src:url("assets/helvetica-neue-condensed.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Helvetica Neue Condensed"; src:url("assets/helvetica-neue-condensed-oblique.ttf") format("truetype"); font-weight:400; font-style:italic; font-display:swap; }
:root { color-scheme:dark; background:#000; font-family:"Helvetica Neue Condensed",Arial,sans-serif; }
* { box-sizing:border-box; }
html,body { width:100%; min-width:320px; margin:0; overflow-x:clip; background:#000; color:#fff; }
body { overscroll-behavior:none; }
.site { position:relative; min-height:100svh; overflow:clip; isolation:isolate; background:#000; }
.artboard {
  --logo-width:clamp(155px,18.23vw,189px);
  --brand-top:clamp(69px,7.91vw,82px);
  --film-top:clamp(178px,20.1vw,208px);
  --film-width:clamp(690px,79.59vw,825px);
  --headline-size:calc(var(--logo-width) * .24886008);
  position:relative; width:100%; height:calc(var(--film-top) + var(--film-width) * .855);
}
.media-stage { position:absolute; z-index:1; top:var(--film-top); left:50%; width:var(--film-width); aspect-ratio:1476 / 1404; transform:translateX(-50%); overflow:hidden; background:#000; }
.video-poster,.loop-video { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.video-poster { z-index:0; }
.loop-video { opacity:0; will-change:opacity; }
.brand { position:absolute; z-index:2; top:var(--brand-top); left:0; width:100%; text-align:center; pointer-events:none; }
.brand .logo { display:block; width:calc(var(--logo-width) * .9828); height:auto; margin:0 auto; transform:translateY(-30px); }
.brand .supporting-copy { position:absolute; top:calc(var(--logo-width) * .292); left:0; width:100%; margin:0; translate:0 -23px; color:#f2f2f2; font:400 calc(var(--logo-width) * .0993)/1.245 "Helvetica Neue Condensed",Arial,sans-serif; white-space:nowrap; }
.brand .tagline { position:absolute; top:calc(var(--film-top) + var(--film-width) * .142 - var(--brand-top) - 24px - var(--headline-size) * .92); left:0; width:100%; margin:0; color:#f7f7f7; font:400 var(--headline-size)/.92 "Benguiat Book",serif; letter-spacing:-.075em; white-space:nowrap; }
.supporting-copy em,.availability-status em { display:inline-block; font-style:normal; transform:skewX(-12deg); }
.artboard .ex-signup { position:absolute; z-index:3; top:calc(var(--brand-top) + var(--logo-width) * .610); left:50%; transform:translateX(-50%); translate:0 -27px; width:calc(var(--logo-width) * 1.596672); }
.ex-signup .ex-shell,.ex-signup .ex-button { min-height:0; }
.ex-signup .ex-input { font-size:4.5455cqw; }
.ex-signup .ex-button span { font-size:3.8685cqw; }

/* Reserve the header layout until its chosen text and fonts are ready.
   Without JavaScript, the static header remains visible. */
.header-pending .logo,.header-pending .tagline,.header-pending .supporting-copy,.header-pending .ex-signup { visibility:hidden; }
@keyframes reveal { from { opacity:0; } to { opacity:1; } }
.site.is-ready .logo,.site.is-ready .tagline,.site.is-ready .supporting-copy,.site.is-ready .ex-signup { animation:reveal .38s ease-out .12s backwards; }
.site.is-ready .media-stage { animation:reveal .8s ease-out .12s backwards; }
@media (min-width:641px) {
  .artboard::before {
    content:""; position:absolute; pointer-events:none; left:50%;
    top:calc(var(--film-top) + var(--film-width) * .089);
    width:calc(var(--film-width) * 2.344); height:calc(var(--film-width) * .782);
    transform:translateX(-50%);
    background:url("assets/desktop-extension.webp") center / 100% 100% no-repeat;
    mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 66%,rgba(0,0,0,.65) 82%,transparent);
  }
  .media-stage { mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.12) 6%,rgba(0,0,0,.5) 14%,rgba(0,0,0,.88) 22%,#000 30%,#000 70%,rgba(0,0,0,.88) 78%,rgba(0,0,0,.5) 86%,rgba(0,0,0,.12) 94%,transparent); }
  .site.is-ready .artboard::before { animation:reveal .8s ease-out .12s backwards; }
}

/* Lower story and usage list. */
.lower-content { width:min(100%,440px); margin:16px auto 0; container-type:inline-size; }
.uses,.availability { position:relative; z-index:2; width:min(100%,440px); margin:0 auto; isolation:isolate; color:#fff; font-family:"Helvetica Neue Condensed",Arial,sans-serif; font-synthesis:weight; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.uses { container-type:inline-size; }
.uses::before,.availability::before { position:absolute; z-index:-1; inset:0 -100vw; background:#000; content:""; }
.uses-layout { position:relative; }
.teardrop-logo { display:block; width:22.49cqw; height:auto; margin:0 auto; transform:translateX(-.704cqw); }
.brand-story { width:88%; margin:6cqw auto 0; text-align:center; font:400 4.1294016cqw/1.35 "Helvetica Neue",Helvetica,Arial,sans-serif; }
.brand-story p { margin:0; }
.brand-story p+p { margin-top:1em; }
.brand-story em { font-style:italic; }
.social-invitation { display:inline-flex; align-items:center; gap:.3em; white-space:nowrap; }
.instagram-link { display:inline-flex; align-items:center; justify-content:center; gap:.2em; padding:.35em; margin:-.35em 0; color:#ff69b4; vertical-align:initial; text-decoration:none; border-radius:.25em; transition:transform 120ms ease; }
.instagram-icon { display:inline-block; width:1em; height:1em; margin:0; }
.instagram-invitation-text { color:#fff; text-decoration:underline dotted #fff 1px; text-underline-offset:.2em; }
.instagram-link:active { transform:translateY(2px) scale(.94); }
.instagram-link:focus-visible { outline:1px solid currentColor; outline-offset:3px; }
.consumption { margin:0; transform:translateX(-1.20cqw); text-align:center; font-size:4.968cqw; line-height:6.4476cqw; font-weight:400; }
.consumption>span { display:block; white-space:nowrap; }
.consumption>span:first-child { font-size:1.0056em; transform:translateX(-.572704cqw); }
.consumption strong { font-weight:700; }
.consumption sup { position:relative; top:-.8em; font-size:.478125em; line-height:0; vertical-align:baseline; }
.uses-heading { margin:3.385cqw 0 0; transform:translateX(-1.015cqw); text-align:center; font:400 3.716064cqw/4.82328cqw "Helvetica Neue",Helvetica,Arial,sans-serif; }
.uses-columns { display:grid; grid-template-columns:max-content max-content; justify-content:center; column-gap:9.41cqw; margin-top:3.633cqw; transform:translateX(-.165cqw); font:400 4.1294016cqw/7.22304cqw "Helvetica Neue",Helvetica,Arial,sans-serif; }
.uses-columns ul { list-style:none; padding:0; margin:0; }
.uses-columns li { display:flex; align-items:center; gap:1.235cqw; white-space:nowrap; }
.tear-bullet { display:block; align-self:center; flex:0 0 auto; width:1.0275012cqw; height:2.0961072cqw; object-fit:contain; }
.uses-ending { margin:2.67cqw 0 0; transform:translateX(-1.32cqw); text-align:center; font:400 4.1294016cqw/4.65696cqw "Helvetica Neue",Helvetica,Arial,sans-serif; white-space:nowrap; }

/* Tear reminders. */
.tear-message-button { position:relative; display:block; width:4.297674cqw; padding:0; border:0; background:transparent; color:#fff; cursor:pointer; }
.story-divider-tear { margin:10.8cqw auto; }
.availability-tear { margin:0 auto; }
.tear-message-button>img { display:block; width:100%; height:auto; }
.tear-message-button:focus-visible { outline:1px solid #fff; outline-offset:6px; border-radius:50%; }
.tear-message { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); white-space:nowrap; font:700 11.5px/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif; padding:0; pointer-events:none; opacity:0; text-shadow:0 1px 3px #000,0 0 6px #000,0 0 12px #000; }
.tear-message:empty { display:none; }
.tear-message.is-showing { animation:tear-reminder 2.8s ease-in-out both; }
.tear-message-button.is-reminding>img { animation:tear-reminder-blur 2.8s ease-in-out both; }
@keyframes tear-reminder { 0%,100%{opacity:0} 18%,72%{opacity:1} }
@keyframes tear-reminder-blur {
  0%,100%{transform:translateY(0) scale(1);filter:blur(0)}
  5%{transform:translateY(1px) scale(.92);filter:blur(0)}
  18%,72%{transform:translateY(0) scale(1);filter:blur(3px)}
}

/* Availability and paired footer brands. */
.availability { padding:10.1cqw 0 max(6cqw,env(safe-area-inset-bottom)); text-align:center; }
.availability-status { margin:11.58cqw 0 0; font-size:4.156cqw; line-height:1.08; font-weight:400; }
.availability-status strong { font-weight:700; }
.availability-brand { white-space:nowrap; }
.availability-status sup { position:relative; top:-.8em; font-size:.478125em; line-height:0; vertical-align:baseline; font-weight:400; }
.availability-contact { margin:6.62cqw 0 0; font:400 3.5326cqw/5.006976cqw "Helvetica Neue",Helvetica,Arial,sans-serif; }
.availability-contact a { display:block; color:inherit; font-weight:700; text-decoration:none; }
.availability-contact a:hover,.availability-contact a:focus-visible { text-decoration:underline; text-underline-offset:.14em; }
.email-icon { display:inline-block; width:.95em; height:.72em; margin-left:.2em; vertical-align:-.02em; }
.brandco-footer { position:relative; display:flex; justify-content:center; align-items:flex-start; gap:0; margin-top:calc(20.766cqw + 30px); }
.brandco-footer::before { content:""; position:absolute; top:-5cqw; left:50%; width:100vw; height:1px; background:#464646; transform:translateX(-50%); }
.footer-brand { width:26cqw; }
.footer-logo-slot { height:12cqw; display:flex; align-items:center; justify-content:center; }
.footer-brkn-logo { display:block; width:16.8cqw; max-height:8.4cqw; object-fit:contain; }
.brandco-logo { position:relative; display:block; width:22.88cqw; aspect-ratio:908 / 330; margin:0 auto; background:#fff; mask:url("assets/brandco-logo.png") top center / 100% auto no-repeat; -webkit-mask:url("assets/brandco-logo.png") top center / 100% auto no-repeat; }
.brandco-copyright { display:block; margin:.5cqw 0 0; color:#fff; font:400 2.3cqw/1.3 Helvetica,Arial,sans-serif; white-space:nowrap; }

/* Corner sharing control. */
.share-control { position:fixed; z-index:10; top:max(12px,env(safe-area-inset-top)); right:max(14px,env(safe-area-inset-right)); border:0; padding:6px; background:transparent; color:#fff; text-align:left; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; cursor:pointer; transition:color .15s,transform .15s; }
.share-title { display:flex; align-items:center; gap:5px; font:400 10px/normal Arial,Helvetica,sans-serif; letter-spacing:.04em; white-space:nowrap; }
.share-words { display:block; line-height:1.05; }
.share-symbols { display:inline-flex; align-items:center; gap:5px; margin-left:2px; }
.share-title img { width:5px; height:11px; object-fit:contain; }
.share-control:active { transform:translateY(2px); }
.share-control:focus-visible { outline:1px solid #fff; outline-offset:3px; }
.share-control.is-sharing,.share-control:active { color:#fff; }
.share-control.is-sharing .share-symbols img { animation:share-tear-fall 1.5s ease-in-out both; }
@keyframes share-tear-fall { 0%,100%{transform:translateY(0);opacity:1} 55%{transform:translateY(35px);opacity:0} 80%{transform:translateY(0);opacity:0} }
.share-status { position:fixed; z-index:11; right:20px; top:max(58px,calc(env(safe-area-inset-top) + 46px)); color:#fff; background:#000; font:12px Helvetica,Arial,sans-serif; }
.share-status:empty { display:none; }

@media (max-width:640px) {
  .artboard { --logo-width:155px; --brand-top:66px; --film-top:155px; --film-width:180vw; height:calc(155px + 153.9vw); }
  .brand .tagline-long { --headline-size:35.316px; }
  .artboard .ex-signup { top:153px; translate:0 -19px; }
  .ex-signup .ex-shell { --radius:3.8685cqw; }
  .ex-signup .ex-content { padding:0 4.2553cqw 0 5.029cqw; gap:3.8cqw; }
  .ex-signup .ex-button { flex-basis:34.4294cqw; border-radius:2.1277cqw; gap:1.16cqw; }
  .ex-signup .ex-button::before { border-radius:1.354cqw; }
  .ex-signup .ex-drop { width:1.8966cqw; height:3.8685cqw; }
  .lower-content { width:min(91%,400.4px); margin-top:calc(min(2.868217%,12.62px) + 16px); }
  .availability { padding-bottom:max(3.066666cqw,env(safe-area-inset-bottom)); }
  .brandco-footer { margin-top:calc(15.10cqw + 30px); }
  .brandco-logo { width:25.1428568cqw; }
  .share-control { top:max(5px,env(safe-area-inset-top)); right:max(6px,env(safe-area-inset-right)); padding:5px; }
  .share-title { font-size:8px; gap:4px; }
  .share-title img { width:4px; height:9px; }
  .share-symbols { gap:4px; }
  .tear-message { font-size:9.2px; }
}
@media (prefers-reduced-motion:reduce) {
  .site.is-ready .logo,.site.is-ready .tagline,.site.is-ready .supporting-copy,.site.is-ready .ex-signup,.site.is-ready .media-stage,.site.is-ready .artboard::before { animation:none; }
  .instagram-link,.share-control { transition:none; }
  .tear-message.is-showing { animation:none; opacity:1; }
  .tear-message-button.is-reminding>img,.share-control.is-sharing .share-symbols img { animation:none; }
}
.uses.is-visible,.availability.is-visible { animation:reveal .3s ease-out backwards; }
@media (prefers-reduced-motion:reduce) { .uses.is-visible,.availability.is-visible { animation:none; } }

/* Embedded browsers can block both native sharing and clipboard permission. */
.share-fallback { position:fixed; z-index:12; top:max(58px,calc(env(safe-area-inset-top) + 46px)); right:12px; width:min(280px,calc(100vw - 24px)); padding:18px 14px 14px; border:1px solid #444; border-radius:8px; background:#101214; color:#eee; font:12px/1.4 Arial,Helvetica,sans-serif; box-shadow:0 6px 24px #000a; }
.share-fallback[hidden] { display:none; }
.share-fallback label { display:block; padding-right:12px; }
.share-fallback input { display:block; width:100%; margin:10px 0; border:1px solid #555; border-radius:3px; background:#000; color:#fff; padding:8px; font:16px Arial,sans-serif; }
.share-copy { border:1px solid #777; border-radius:4px; padding:8px 12px; background:#20252a; color:#fff; cursor:pointer; }
.share-close { position:absolute; right:5px; top:3px; width:28px; height:28px; padding:0; border:0; background:transparent; color:#ddd; cursor:pointer; font-size:20px; }
.share-status { max-width:calc(100vw - 40px); }

.share-words { transition:text-shadow 140ms ease; }
.share-control:active .share-words,.share-control.is-sharing .share-words { text-shadow:0 0 4px #ffffff88,0 0 9px #ffffff44; }
@media (prefers-reduced-motion:reduce) { .share-words { transition:none; } }