/* Offer link screens (offer-sheet.js) — Night Summit palette from account.html tokens. */
.os-claim{max-width:520px;margin:0 auto 18px;padding:22px 24px;border-radius:20px;text-align:center;
  border:1px solid var(--border-highlight);background:linear-gradient(160deg,var(--bg-mid),var(--surface))}
.os-eyebrow{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--accent)}
.os-code{display:inline-block;margin:12px 0 10px;padding:8px 16px;border:1px dashed var(--accent);border-radius:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:20px;font-weight:700;letter-spacing:2px;color:var(--text)}
.os-note{font-size:13px;line-height:1.5;color:var(--text-muted)}

.os-backdrop{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(3,6,12,0.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.os-card{position:relative;width:min(440px,100%);padding:30px 26px 24px;border-radius:24px;text-align:center;
  border:1px solid var(--border-highlight);background:linear-gradient(170deg,var(--bg-mid) 0%,var(--bg) 70%);
  box-shadow:0 30px 80px rgba(0,0,0,0.55),0 0 60px var(--accent-dim)}
.os-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:10px;border:1px solid var(--border);
  background:rgba(255,255,255,0.03);color:var(--text-muted);cursor:pointer;font-size:14px}
.os-title{font-family:'Outfit',sans-serif;font-weight:800;font-size:26px;letter-spacing:-0.6px;margin:10px 0 8px;color:var(--text)}
.os-price-row{display:flex;align-items:baseline;justify-content:center;gap:6px;margin:6px 0 10px}
.os-price{font-family:'Outfit',sans-serif;font-weight:800;font-size:44px;letter-spacing:-1.5px;color:var(--accent)}
.os-per{font-size:15px;color:var(--text-muted)}
.os-was{font-size:14px;color:var(--text-muted);margin-left:6px}
.os-then{font-size:16px;font-weight:600;color:var(--text);margin:-2px 0 12px}
.os-chip{display:table;margin:0 auto 6px;padding:5px 12px;border-radius:999px;background:var(--accent);
  color:var(--ink);font-size:12px;font-weight:800;letter-spacing:0.5px}
.os-body{font-size:15px;line-height:1.55;color:var(--text);margin:6px 0 4px}
.os-actions{display:flex;gap:10px;justify-content:center;margin-top:20px}
.os-actions .btn{flex:1;max-width:200px}
.os-secure{margin-top:14px;font-size:12px;color:var(--text-muted)}
@media (max-width:560px){
  .os-backdrop{align-items:flex-end;padding:0}
  .os-card{width:100%;border-radius:24px 24px 0 0;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
}

/* Signed-out claim card: the offer, then "Claim now", then the account step. */
.content.narrow.os-offer{max-width:600px}
.os-claim-btn{width:100%;max-width:340px;margin:6px auto 0;font-size:16px}
.os-claim > .os-note{margin-top:14px}
.os-fine{font-size:12px;letter-spacing:0.4px;color:var(--text-muted);margin:-6px 0 4px;text-transform:uppercase}
.os-step-title{font-family:'Outfit',sans-serif;font-weight:800;font-size:22px;color:var(--text);margin:8px 0 4px}
.os-step-sub{font-size:14px;color:var(--text-muted);margin:0 0 16px}
.os-form{text-align:left;max-width:380px;margin:0 auto}
.os-form .field{margin-bottom:12px}
.os-form label{display:block;font-size:13px;font-weight:600;color:var(--text-muted);margin-bottom:6px}
.os-form input{width:100%}
.os-form .os-submit{width:100%;margin-top:4px}
.os-alert{margin:4px 0 12px}
.os-links{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:14px}
.os-link{background:none;border:0;padding:8px 4px;min-height:40px;color:var(--accent);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.os-link:hover{text-decoration:underline}

/* Laptop and wider: a roomier card with a bigger price. */
@media (min-width:900px){
  #authView .os-claim{max-width:600px;padding:44px 48px}
  #authView .os-title{font-size:34px;margin:14px 0 10px}
  #authView .os-price-row{margin:8px 0 14px}
  #authView .os-price{font-size:76px;letter-spacing:-3px;line-height:1}
  #authView .os-per{font-size:20px}
  #authView .os-then{font-size:20px;margin:0 0 16px}
  #authView .os-code{font-size:24px;margin:16px auto 18px}
}

/* Loading shimmer in the signed-out claim card (replaced by the offer details). */
.os-skel{display:flex;flex-direction:column;align-items:center;gap:12px;margin:14px 0 16px}
.os-skel-line{display:block;height:16px;border-radius:8px;
  background:linear-gradient(90deg,var(--accent-dim),var(--border-highlight),var(--accent-dim));
  background-size:200% 100%;animation:os-shimmer 1.2s ease-in-out infinite}
.os-skel-title{width:46%;height:22px}
.os-skel-price{width:60%;height:44px;border-radius:12px}
.os-skel-then{width:40%}
@keyframes os-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.os-skel-line{animation:none}}

/* Offer focus: no site nav on the signed-out offer screen (offer-fast.js adds
   the class in <head> with an inline rule so the nav never flashes). */
html.offer-focus body > nav{display:none}
html.offer-focus #authView .hero{padding-top:56px}
/* New-members-only offers: no "already use the app? log in" hint. */
.os-new-only > .os-note{display:none}

/* Account screen (after "Claim now"): replaces the offer card. */
.os-account{max-width:520px;margin:0 auto 18px;padding:26px 28px 24px;border-radius:20px;
  border:1px solid var(--border-highlight);background:linear-gradient(160deg,var(--bg-mid),var(--surface))}
.os-back{background:none;border:0;padding:6px 0;min-height:40px;color:var(--text-muted);font:inherit;font-size:14px;cursor:pointer}
.os-back:hover{color:var(--text)}
.os-mini{margin:4px 0 18px;padding:12px 14px;border-radius:12px;border:1px dashed var(--accent);
  font-size:14px;font-weight:600;color:var(--text);text-align:center}
.os-account .os-step-sub{text-align:center}
@media (min-width:900px){ #authView .os-account{max-width:600px;padding:32px 48px 30px} }

/* ── Motion (offer-sheet.js adds the one-shot classes; ~250ms, eased) ── */
@keyframes os-out{to{opacity:0;transform:translateX(-24px)}}
@keyframes os-out-back{to{opacity:0;transform:translateX(24px)}}
@keyframes os-in{from{opacity:0;transform:translateX(24px)}}
@keyframes os-in-back{from{opacity:0;transform:translateX(-24px)}}
@keyframes os-fade{from{opacity:0}}
@keyframes os-fade-out{to{opacity:0}}
@keyframes os-rise{from{opacity:0;transform:translateY(8px)}}
@keyframes os-pop{from{opacity:0;transform:translateY(18px) scale(.98)}}
.os-out{animation:os-out .15s ease-in forwards}
.os-out-back{animation:os-out-back .15s ease-in forwards}
.os-in{animation:os-in .28s cubic-bezier(.2,.8,.2,1)}
.os-in-back{animation:os-in-back .28s cubic-bezier(.2,.8,.2,1)}
.os-fade{animation:os-fade .26s ease}
.os-detail{animation:os-rise .38s cubic-bezier(.2,.8,.2,1) both}
.os-alert.show{animation:os-rise .22s ease}
.os-backdrop:not(.hidden){animation:os-fade .2s ease}
.os-backdrop:not(.hidden) .os-card{animation:os-pop .32s cubic-bezier(.2,.8,.2,1)}
.os-backdrop.os-closing{animation:os-fade-out .18s ease forwards}
.os-claim-btn,.os-submit{transition:transform .12s ease,box-shadow .2s ease}
.os-claim-btn:active,.os-submit:active{transform:scale(.98)}
/* View Transitions (offer-sheet.js morph()): the offer card and the account card
   share one name, so the box glides to its new height while the content swaps
   inside it; the hero text cross-fades in place. Old browsers use the slides above. */
html.offer-focus #authView .hero h1{view-transition-name:os-hero-title}
html.offer-focus #authView .hero p{view-transition-name:os-hero-sub}
.os-claim,.os-account{view-transition-name:os-panel}
::view-transition-group(*){animation-duration:.42s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-group(os-panel){overflow:clip;border-radius:20px}
::view-transition-old(os-panel){animation:os-vt-out .18s ease-in both}
::view-transition-new(os-panel){animation:os-vt-in .36s cubic-bezier(.22,1,.36,1) .08s both}
html[data-os-dir="back"]::view-transition-old(os-panel){animation-name:os-vt-out-back}
html[data-os-dir="back"]::view-transition-new(os-panel){animation-name:os-vt-in-back}
html[data-os-dir="swap"]::view-transition-old(os-panel){animation-name:os-fade-out}
html[data-os-dir="swap"]::view-transition-new(os-panel){animation-name:os-fade}
::view-transition-old(os-hero-title),::view-transition-old(os-hero-sub){animation:os-fade-out .16s ease-in both}
::view-transition-new(os-hero-title),::view-transition-new(os-hero-sub){animation:os-fade .3s ease .1s both}
@keyframes os-vt-out{to{opacity:0;transform:translateX(-12px)}}
@keyframes os-vt-out-back{to{opacity:0;transform:translateX(12px)}}
@keyframes os-vt-in{from{opacity:0;transform:translateX(12px)}}
@keyframes os-vt-in-back{from{opacity:0;transform:translateX(-12px)}}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .os-out,.os-out-back,.os-in,.os-in-back,.os-fade,.os-detail,.os-alert.show,
  .os-backdrop,.os-backdrop .os-card,.os-backdrop.os-closing{animation:none!important}
  .os-claim-btn,.os-submit{transition:none}
}

/* Sign-up code step: one wide, spaced input for the emailed code. */
.os-code-input{text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:22px;letter-spacing:6px}
.os-code-input::placeholder{font-family:'DM Sans',sans-serif;font-size:15px;letter-spacing:0}
.os-step-sub strong{color:var(--text);font-weight:600}
.os-link:disabled{color:var(--text-muted);cursor:default;text-decoration:none}