/* Portrait Overlay Collection: the band on the Vault landing, the second checkout bump and the /overlays/ page.
   Loaded after style.css on both pages; the landing's original styles remain unchanged. */

/* ---------- shared: tutorial video frame ---------- */
.overlay-video-frame{position:relative;width:min(100%,330px);aspect-ratio:9/16;margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0c0d0c;box-shadow:0 30px 80px -20px #000c}
.overlay-video-frame video{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- shared: before / after pair ---------- */
.overlay-pair{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:0;background:var(--line)}
.overlay-pair img{width:100%;aspect-ratio:2/3;object-fit:cover;background:#222}
.overlay-pair figcaption{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;padding:10px 2px 0;background:var(--bg);font-size:13px;line-height:1.5;color:var(--muted)}
.overlay-pair figcaption b{font-weight:500;color:var(--ink)}

/* ---------- band on the Vault landing ---------- */
.overlay-band{border-top:1px solid var(--line);background:var(--bg);padding:96px 0 104px}
.overlay-band-inner{display:grid;grid-template-columns:330px minmax(0,1fr);gap:clamp(40px,7vw,110px);align-items:center}
.overlay-band-copy h2{text-wrap:balance}
.overlay-band-status{display:flex;align-items:center;gap:10px;margin:18px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.overlay-band-status b{padding:2px 9px;border:1px solid var(--gold);border-radius:99px;color:var(--gold);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.overlay-band-lede{max-width:54ch;margin:22px 0 34px;color:#c4c5bd;font-size:17px;line-height:1.7}
.overlay-band-pairs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 0 34px}
.overlay-band-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.overlay-band-actions p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.overlay-band .text-link{font-size:15px;gap:14px;border-bottom-color:var(--gold);color:var(--ink)}
@media(max-width:1100px){.overlay-band-inner{grid-template-columns:280px minmax(0,1fr);gap:44px}.overlay-band .overlay-video-frame{width:280px}}
@media(max-width:780px){
  .overlay-band{padding:56px 0 60px;overflow:hidden}
  .overlay-band-inner{display:flex;flex-direction:column;align-items:stretch;gap:30px}
  .overlay-band .overlay-video-frame{align-self:center;width:min(78vw,calc(66svh * 9 / 16))}
  .overlay-band-lede{margin:18px 0 26px;font-size:16px}
  /* The pairs scroll sideways and bleed to the screen edge so the next one is visibly cut. */
  .overlay-band-pairs{display:flex;gap:12px;margin:0 -6vw 28px;padding:0 6vw 6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .overlay-band-pairs::-webkit-scrollbar{display:none}
  .overlay-band-pairs .overlay-pair{flex:0 0 72vw;scroll-snap-align:center}
  .overlay-band-actions{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ---------- checkout dialog: two optional extras ---------- */
.checkout-form>.checkout-bump+.checkout-bump{margin-top:-10px}
.checkout-bump-thumb{flex:none;width:68px;height:68px;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.checkout-bump-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.checkout-bump-text strong s{color:var(--muted);font-family:var(--sans);font-size:13px;text-decoration-thickness:1px}
.checkout-extras-note{margin:-8px 0 20px;color:var(--muted);font-size:13px;line-height:1.5}
.checkout-extras-note b{color:var(--gold);font-weight:600}
.checkout-extras-note[hidden]{display:none}
@media(max-width:780px){.checkout-extras-note{font-size:14px}}

/* ---------- line under the Vault buy button ---------- */
.offer-extras{margin:16px 0 14px;font-size:14px;line-height:1.6;color:#4e5948}
.offer-extras a{color:#293b27;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- /overlays/ page ---------- */
.ov-topbar .policy-topbar-inner{gap:14px}
.ov-topbar-actions{display:flex;align-items:center;gap:14px}
.ov-topbar .language{min-height:44px;padding:8px 6px;color:var(--ink)}
.ov-hero{display:grid;grid-template-columns:minmax(0,1fr) 330px;grid-template-areas:"copy video" "buy video";column-gap:clamp(40px,7vw,110px);row-gap:0;align-items:center;padding-top:70px;padding-bottom:84px}
.ov-hero-copy{grid-area:copy;align-self:end}
.ov-hero-buy{grid-area:buy;align-self:start}
.ov-hero .overlay-video-frame{grid-area:video}
.ov-hero h1{font-size:clamp(44px,5.4vw,78px);line-height:1.05;text-wrap:balance;margin:0 0 24px}
.ov-hero-lede{max-width:50ch;margin:0 0 30px;color:#c4c5bd;font-size:18px;line-height:1.7}
.ov-price{display:flex;align-items:baseline;gap:14px;margin:0 0 22px}
.ov-price strong{font-family:var(--serif);font-size:58px;font-weight:400;line-height:1;letter-spacing:-.04em;color:var(--gold)}
.ov-price span{font-size:14px;line-height:1.5;color:var(--muted)}
.ov-hero-note{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
.ov-owner-offer{padding:14px 16px;margin:0 0 22px;border:1px solid var(--gold);color:var(--ink);font-size:14px;line-height:1.6}
.ov-owner-offer[hidden]{display:none}
.ov-hero .overlay-video-frame{justify-self:end}

.ov-section{padding-top:84px;padding-bottom:88px;border-top:1px solid var(--line)}
.ov-section-head{max-width:760px;margin:0 0 44px}
.ov-section-head h2{text-wrap:balance}
.ov-section-head p{max-width:60ch;margin:20px 0 0;color:var(--muted);font-size:17px;line-height:1.7}

/* examples: tap or hover a tile to see the photo without the overlay */
.ov-examples{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.ov-example{position:relative;margin:0}
.ov-example button{position:relative;display:block;width:100%;padding:0;border:0;background:#222;aspect-ratio:2/3;overflow:hidden;cursor:pointer}
.ov-example img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ov-example .after{transition:opacity .28s cubic-bezier(.16,1,.3,1)}
.ov-example button[aria-pressed="true"] .after{opacity:0}
.ov-example-state .without,.ov-example button[aria-pressed="true"] .with{display:none}
.ov-example button[aria-pressed="true"] .without{display:inline}
.ov-example-state{position:absolute;left:10px;bottom:10px;z-index:2;padding:4px 10px;border:1px solid #ffffff35;border-radius:2px;background:#151713d9;color:var(--ink);font-size:12px;line-height:1.5}
.ov-example button[aria-pressed="true"] .ov-example-state{border-color:var(--gold);color:var(--gold)}
.ov-example figcaption{padding-top:10px;font-size:14px;line-height:1.5;color:var(--muted)}
.ov-example figcaption b{display:block;font-weight:500;color:var(--ink)}
.ov-examples-hint{margin:26px 0 0;font-size:14px;color:var(--muted)}
@media(hover:hover){.ov-example button:hover .after{opacity:0}.ov-example button:hover .ov-example-state{border-color:var(--gold);color:var(--gold)}.ov-example button:hover .with{display:none}.ov-example button:hover .without{display:inline}}

/* what is inside */
.ov-inside{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,90px);align-items:start}
.ov-facts{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.ov-facts li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.6;color:var(--muted)}
.ov-facts b{font-family:var(--serif);font-size:34px;font-weight:400;line-height:1.1;color:var(--gold);font-variant-numeric:tabular-nums}
.ov-facts strong{display:block;font-weight:500;color:var(--ink)}
.ov-families{margin:0;padding:0;list-style:none;columns:2;column-gap:36px;font-family:var(--serif);font-size:clamp(20px,1.9vw,26px);line-height:1.5}
.ov-families li{break-inside:avoid;padding:3px 0}
.ov-families small{margin-left:8px;font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.ov-inside-note{margin:26px 0 0;font-size:14px;line-height:1.6;color:var(--muted)}

/* three steps: the order is the information */
.ov-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin:0;padding:0;list-style:none;counter-reset:step}
.ov-steps li{counter-increment:step;padding-top:20px;border-top:1px solid var(--gold);font-size:16px;line-height:1.7;color:var(--muted)}
.ov-steps li::before{content:counter(step);display:block;margin-bottom:14px;font-family:var(--serif);font-size:44px;line-height:1;color:var(--gold)}
.ov-steps strong{display:block;margin-bottom:6px;font-family:var(--serif);font-size:24px;font-weight:400;line-height:1.25;color:var(--ink)}
.ov-steps-note{max-width:70ch;margin:34px 0 0;font-size:15px;line-height:1.7;color:var(--muted)}

/* Vault tie-in */
.ov-vault{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,90px);align-items:center}
.ov-vault .overlay-pair{max-width:560px}
.ov-vault-copy p{max-width:52ch;margin:20px 0 0;color:var(--muted);font-size:17px;line-height:1.7}
.ov-vault-copy .text-link{margin-top:30px;font-size:15px;border-bottom-color:var(--gold)}

.ov-faq{display:grid;grid-template-columns:36% 1fr;gap:10%}
.ov-faq .faqs a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ov-closing{text-align:center}
.ov-closing h2{font-size:clamp(2.6rem,5vw,4.6rem);margin:0 auto 30px;max-width:16ch;text-wrap:balance}
.ov-closing p{margin:16px 0 0;font-size:14px;color:var(--muted)}

/* overlay checkout dialog: no email step, only delivery consent */
.ov-checkout .checkout-form{padding-top:18px}
.ov-checkout .checkout-consents{margin-top:4px}

@media(max-width:1100px){.ov-examples{grid-template-columns:repeat(3,minmax(0,1fr))}.ov-hero{grid-template-columns:minmax(0,1fr) 280px}.ov-hero .overlay-video-frame{width:280px}}
@media(max-width:780px){
  .ov-topbar .button-small{min-height:44px}
  .ov-hero{display:flex;flex-direction:column;align-items:stretch;gap:24px;padding-top:26px;padding-bottom:52px}
  .ov-hero-copy,.ov-hero-buy{align-self:stretch}
  .ov-hero h1{font-size:clamp(38px,10.4vw,48px);margin:0 0 16px}
  .ov-hero-lede{font-size:16px;margin:0}
  .ov-hero .overlay-video-frame{align-self:center;width:min(74vw,calc(60svh * 9 / 16))}
  .ov-hero .button{width:100%}
  .ov-price strong{font-size:50px}
  .ov-section{padding-top:52px;padding-bottom:56px}
  .ov-section-head{margin-bottom:30px}
  .ov-section-head p{font-size:16px}
  .ov-examples{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  .ov-inside,.ov-vault,.ov-faq{grid-template-columns:1fr;gap:34px}
  /* On a phone the families run on as one paragraph instead of two cramped columns. */
  .ov-families{columns:auto;display:flex;flex-wrap:wrap;gap:0;font-size:20px;line-height:1.45}
  .ov-families li{padding:2px 0}
  .ov-families li:not(:last-child)::after{content:"·";margin:0 9px;color:var(--gold)}
  .ov-facts li{grid-template-columns:84px minmax(0,1fr);gap:14px}
  .ov-steps{grid-template-columns:1fr;gap:30px}
  .ov-closing .button{width:100%}
}
@media(prefers-reduced-motion:reduce){.ov-example .after{transition:none}}

/* ---------- header: a fifth nav link (Overlays). Between the mobile menu and the wide layout the row is
   tightened so the Italian labels stay on one line. ---------- */
@media(min-width:961px) and (max-width:1180px){.header nav{gap:14px;font-size:13px}.header nav a{white-space:nowrap}.header{gap:14px}}