/* billyapology / apology dollar — shared styles.
   Desktop values come from the 560px artboards, phone values (max-width 559px)
   from the 390px artboards. */

body { margin: 0; background: #FFFFFF; }
a { color: #0000EE; }
a:hover { color: #551A8B; }
[hidden] { display: none !important; }

.claim-btn { transition: background-color .12s, color .12s, box-shadow .12s; }
.claim-btn:hover, .claim-btn:focus-visible, .claim-btn:active {
  background: #0000EE !important; color: #FFFFFF !important;
  border-top-color: #6B6BFF !important; border-left-color: #6B6BFF !important;
  border-right-color: #00007A !important; border-bottom-color: #00007A !important;
  box-shadow: 0 0 10px 2px rgba(0,0,238,0.55);
}
.claim-btn:active {
  border-top-color: #00007A !important; border-left-color: #00007A !important;
  border-right-color: #6B6BFF !important; border-bottom-color: #6B6BFF !important;
}
.new-bob { animation: newbob .6s steps(1,end) infinite; }
@keyframes newbob { 0% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
@media (prefers-reduced-motion: reduce) { .new-bob { animation: none; } }

/* ---------- page shell ---------- */
.page {
  max-width: 560px; min-height: var(--h, 900px); margin: 0 auto;
  box-sizing: border-box; padding: 28px 32px;
  background: #FFFFFF; color: #000000;
  font-family: 'Times New Roman', Times, serif; font-size: 16px; line-height: 1.35;
  display: flex; flex-direction: column; gap: 12px;
}
.logo { display: block; width: 340px; align-self: center; }
.logo img { display: block; width: 100%; height: auto; }
.nav { font-size: 15px; }
.rule { margin: 0; border: 0; border-top: 1px solid #808080; border-bottom: 1px solid #FFFFFF; }
.rule-bottom { margin: auto 0 0; }
.title { margin: 0; font-size: 32px; font-weight: bold; }
.p-only { display: none; }

/* beveled gray button */
.btn {
  display: inline-block; padding: 6px 18px; background: #C0C0C0; color: #000000;
  text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 14px; cursor: pointer;
  border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF;
  border-right: 2px solid #404040; border-bottom: 2px solid #404040;
}
button.btn { line-height: inherit; }
.btn:hover { color: #000000; }
.btn[disabled] { cursor: default; }

/* ---------- 88x31 badges ---------- */
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { position: relative; width: 88px; height: 31px; box-sizing: border-box; overflow: hidden; }
.badge-yt {
  border: 1px solid #000000; box-shadow: inset 2px 2px 0 rgba(255,255,255,0.55), inset -2px -2px 0 rgba(0,0,0,0.5);
  background: #CC0000; color: #FFFFFF; text-decoration: none;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-family: Verdana, Geneva, sans-serif; font-size: 10px; font-weight: bold;
}
.badge-yt:hover { color: #FFFFFF; }
.badge-yt .play { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #FFFFFF; }
.badge-fil { border: 1px solid #000000; background: #111111; font-family: Verdana, Geneva, sans-serif; font-weight: bold; line-height: 1; }
.badge-fil .sun { position: absolute; left: 5px; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: repeating-conic-gradient(#FFD200 0deg 14deg, transparent 14deg 45deg); }
.badge-fil .core { position: absolute; left: 9px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: #FFD200; }
.badge-fil .t1, .badge-fil .t2 { position: absolute; left: 27px; right: 3px; text-align: center; font-size: 8px; letter-spacing: 0.3px; }
.badge-fil .t1 { top: 6px; color: #FFD200; }
.badge-fil .t2 { top: 16px; color: #FFFFFF; }
.badge-fil .bevel { position: absolute; inset: 0; box-shadow: inset 2px 2px 0 rgba(255,255,255,0.35), inset -2px -2px 0 rgba(0,0,0,0.6); pointer-events: none; }
.badge-park img { position: absolute; left: 0; top: 0; display: block; width: 88px; height: 31px; }
.badge-park .label {
  position: absolute; left: 0; right: 0; bottom: 3px; text-align: center;
  font-family: Verdana, Geneva, sans-serif; font-size: 8px; font-weight: bold; line-height: 1; letter-spacing: 0.6px;
  color: #FFFFFF; text-shadow: 1px 0 0 #000000, -1px 0 0 #000000, 0 1px 0 #000000, 0 -1px 0 #000000;
}
.badge-park .bevel { position: absolute; inset: 0; box-shadow: inset 0 0 0 1px #000000, inset 3px 3px 0 rgba(255,255,255,0.55), inset -3px -3px 0 rgba(0,0,0,0.5); pointer-events: none; }

/* ---------- claim page ---------- */
.frame { border: 1px solid #000000; padding: 6px; background: #000000; outline: 1px solid #BBBBBB; outline-offset: 3px; }
.frame img { display: block; width: 100%; height: auto; aspect-ratio: 814 / 340; object-fit: cover; }
.gallery-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.thumbs { display: flex; gap: 8px; }
.thumb { width: 76px; padding: 2px; background: #000000; border: 1px solid #000000; outline: none; outline-offset: 1px; cursor: pointer; }
.thumb.selected { outline: 2px solid #0000EE; }
.thumb img { display: block; width: 100%; height: auto; }
.pager { font-size: 14px; display: flex; align-items: center; gap: 6px; }
.pager button { background: none; border: 0; padding: 4px 0; font: inherit; color: #0000EE; text-decoration: underline; cursor: pointer; }
.caption { font-size: 13px; font-style: italic; }
.details { display: flex; flex-direction: column; gap: 4px; }
.edition-sold { color: #CC0000; font-weight: bold; }
.cta { display: flex; gap: 12px; align-items: center; }
.cta-note { font-size: 14px; }
.site-footer { font-size: 13px; display: flex; flex-direction: column; gap: 8px; }

/* ---------- checkout ---------- */
.back { font-size: 14px; }
.order { border-collapse: collapse; width: 100%; border: 1px solid #000000; }
.order td, .order th { padding: 4px 8px; vertical-align: middle; }
.order .r { text-align: right; }
.order .small { font-size: 14px; }
.order .thumb-cell { width: 96px; }
.order .thumb-cell img { display: block; width: 88px; height: auto; border: 1px solid #000000; }
.order .sub { font-size: 13px; font-style: italic; }
.h2 { margin: 8px 0 0; font-size: 20px; font-weight: bold; }
.req-note { font-size: 13px; margin-top: -10px; }
.req { color: #CC0000; }
.ship-form { display: table; border-collapse: collapse; width: 100%; background: #F2F2F2; border: 2px groove #D4D4D4; }
.f-row { display: table-row; }
.f-label, .f-cell { display: table-cell; padding: 4px 8px; vertical-align: middle; }
.f-label { width: 32%; text-align: right; }
.f-label b { font-weight: normal; }
.field {
  box-sizing: border-box; width: 100%; padding: 5px 7px; background: #FFFFFF;
  font-family: 'Courier New', Courier, monospace; font-size: 15px; color: #000000;
  border-top: 2px solid #808080; border-left: 2px solid #808080;
  border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF;
}
.sz { display: flex; gap: 8px; }
.sz-item { display: flex; flex-direction: column; gap: 3px; }
.sz-state { width: 64px; }
.sz-zip { flex: 1; min-width: 0; }
.order-actions { display: flex; gap: 10px; align-items: center; }
.order-actions .btn { padding: 6px 22px; }
.form-msg { font-size: 14px; color: #CC0000; }
.form-msg:empty { display: none; }
.fine { font-size: 13px; color: #555555; }

/* ---------- shared panels ---------- */
.media-box { border: 1px solid #BBBBBB; padding: 3px; background: #FFFFFF; margin: 4px 0 0; }
.video-ph { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: #E8E8E8; color: #808080; font-style: italic; font-size: 15px; }
.promo {
  margin: 8px 0 0; text-align: center;
  font-family: 'Arial Black', 'Arial Bold', Gadget, Impact, sans-serif; font-style: italic; font-weight: 900;
  font-size: 30px; color: #0044EE; text-shadow: 2px 2px 0 #9FD0FF; letter-spacing: 0.3px;
}
.new-badge {
  display: inline-block; padding: 1px 4px 0; background: #CC0000; color: #FFFFFF;
  font-family: Verdana, Geneva, sans-serif; font-size: 10px; font-weight: bold; line-height: 1.3;
  vertical-align: 2px; border: 1px solid #7A0000; text-decoration: none;
}

/* ---------- be in our next video ---------- */
.example { margin: 4px 0 0; display: flex; flex-direction: column; align-items: flex-start; }
.example-tab {
  position: relative; z-index: 1; margin: 0 0 -1px 10px; padding: 1px 10px 2px; background: #FFFFFF;
  border: 1px solid #BBBBBB; border-bottom-color: #FFFFFF;
  font-family: 'Times New Roman', Times, serif; font-size: 15px; font-style: italic; line-height: 20px; color: #000000;
}
.example-box { align-self: stretch; border: 1px solid #BBBBBB; padding: 3px; background: #FFFFFF; }
.example-media { position: relative; line-height: 0; }
.example-media img { display: block; width: 100%; height: auto; }
.example-media .example-caption { position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); width: 34%; max-width: 226px; }
.lede { margin: -8px 0 0; text-align: center; }
.options { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); gap: 10px; align-items: center; }
.win {
  box-sizing: border-box; height: 100%; padding: 3px; background: #C0C0C0;
  border: 2px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF; box-shadow: 0 0 0 1px #808080;
  display: flex; flex-direction: column;
}
.win-title { padding: 5px 10px; background: #CDE6FF; border: 1px solid; border-color: #808080 #FFFFFF #000000 #808080; font-weight: bold; font-size: 15px; color: #000080; }
.win-body {
  flex: 1; padding: 12px 10px 14px; background: #FFFFFF;
  border: 1px solid; border-color: #FFFFFF #FFFFFF #FFFFFF #808080; border-top: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
}
.win-head { font-weight: bold; font-size: 18px; }
.win-text { font-size: 15px; }
.or {
  display: flex; align-items: center; justify-content: center; width: 34px; height: 24px; background: #C0C0C0;
  border-top: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; border-right: 2px solid #404040; border-bottom: 2px solid #404040;
  font-family: Verdana, Geneva, sans-serif; font-size: 11px; font-weight: bold; color: #000000;
}
.copy-link { background: none; border: 0; padding: 0; font: inherit; color: #0000EE; text-decoration: underline; cursor: pointer; }
.copy-link:hover { color: #551A8B; }
.email-to { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 8px; }
.email-to .copy-link { font-size: 19px; }
.copy-status { margin-top: -4px; min-height: 18px; font-size: 13px; color: #555555; font-style: italic; }
.consent { margin: 4px 0 0; text-align: center; font-size: 13px; color: #555555; font-style: italic; }

/* ---------- consolation ---------- */
.center-p { margin: 8px 0 0; text-align: center; }
.prize { border: 1px solid #000000; background: #FFFFFF; display: flex; flex-direction: column; }
.prize-title { padding: 5px 10px; background: #CDE6FF; border-bottom: 1px solid #000000; font-weight: bold; font-size: 15px; color: #000080; }
.prize-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.prize-body img { display: block; width: 280px; height: auto; border: 3px solid #000000; box-sizing: border-box; }
.prize-head { font-weight: bold; font-size: 18px; }
.prize-text { font-size: 15px; }

/* ---------- why ---------- */
.peek-caption { font-size: 13px; font-style: italic; margin-top: -8px; }
.peek img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.sms { margin: 10px 0 0; padding: 12px 16px 16px; border: 2px groove #D4D4D4; background: #F2F2F2; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sms legend { padding: 0 8px; font-family: 'Arial Black', 'Arial Bold', Gadget, Impact, sans-serif; font-style: italic; font-weight: 900; color: #0044EE; text-shadow: 2px 2px 0 #9FD0FF; letter-spacing: 0.3px; white-space: nowrap; font-size: 26px; }
.sms-form { display: flex; flex-direction: column; gap: 10px; }
.sms-pitch { display: flex; align-items: center; gap: 12px; }
.sms-pitch img { display: block; width: 68px; height: 50px; object-fit: cover; object-position: center; flex-shrink: 0; border: 1px solid #808080; }
.sms-label { font-size: 14px; }
.sms-row { display: flex; gap: 8px; align-items: stretch; }
.sms-prefix {
  display: flex; align-items: center; padding: 0 10px; background: #E4E4E4;
  font-family: 'Courier New', Courier, monospace; font-size: 16px;
  border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF;
}
.sms-input {
  flex: 1; min-width: 0; box-sizing: border-box; padding: 7px 10px; background: #FFFFFF;
  font-family: 'Courier New', Courier, monospace; font-size: 16px; color: #000000; outline-offset: 1px;
  border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF;
}
.sms-row .btn { padding: 6px 18px; }
.sms-done { padding: 8px 0; }
.sms-fine { font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.sms-fine .muted { color: #555555; }

/* ---------- phone ---------- */
@media (max-width: 559px) {
  .page { min-height: var(--hp, 900px); padding: 20px 18px; font-size: 17px; }
  .d-only { display: none; }
  .p-only { display: inline; }
  .logo { width: 290px; }
  .nav { font-size: 17px; display: flex; gap: 4px; align-items: center; }
  .nav a { padding: 10px 4px; margin: -10px -4px; }
  .title { font-size: 30px; }
  .btn-wide { display: flex; align-items: center; justify-content: center; min-height: 48px; box-sizing: border-box; padding: 0; font-size: 17px; }

  .frame { padding: 5px; }
  .gallery-bar { gap: 8px; }
  .thumb { width: 72px; min-height: 44px; padding: 4px; display: flex; align-items: center; }
  .pager { font-size: 15px; gap: 4px; }
  .pager button { min-height: 44px; padding: 0 4px; }
  .pager .pipe { display: none; }
  .caption { font-size: 14px; }
  .cta { flex-direction: column; align-items: stretch; gap: 8px; }
  .cta-note { text-align: center; }
  .site-footer { font-size: 14px; }

  .back { font-size: 15px; }
  .back a { display: inline-block; padding: 10px 0; margin: -10px 0; }
  .order { font-size: 15px; }
  .order td, .order th { padding: 4px 6px; }
  .order .thumb-cell { width: 76px; }
  .order .thumb-cell img { width: 70px; }
  .req-note { font-size: 14px; }
  .ship-form { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 14px; font-size: 15px; box-sizing: border-box; }
  .f-row { display: flex; flex-direction: column; gap: 3px; }
  .f-label, .f-cell { display: block; padding: 0; width: auto; text-align: left; }
  .f-label b { font-weight: bold; }
  .f-row.statezip .f-label { display: none; }
  .field { min-height: 44px; padding: 6px 8px; font-size: 16px; }
  .sz { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }
  .sz-state { width: auto; }
  .order-actions { flex-direction: column; align-items: stretch; }
  .order-actions .btn { padding: 0; }
  .fine { font-size: 14px; }

  .example-media .example-caption { width: 42%; }
  .promo { font-size: 22px; white-space: nowrap; }
  .options { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .options .win { align-self: stretch; }
  .win-head { font-size: 19px; }
  .win-text { font-size: 16px; }
  .email-to { display: block; text-align: center; }
  .email-to .copy-link { padding: 8px 0; font-size: 20px; }
  .copy-status { margin-top: -10px; font-size: 14px; padding: 0 11px; }
  .consent { font-size: 14px; }

  .prize-title { font-size: 16px; }
  .prize-body img { width: 100%; }
  .prize-head { font-size: 19px; }
  .prize-text { font-size: 16px; }
  .prize-dl { display: flex; align-items: center; justify-content: center; align-self: stretch; min-height: 48px; box-sizing: border-box; padding: 0; font-size: 17px; }
  .first-dibs { display: inline-block; padding: 8px 0; }

  .p16 { font-size: 16px; }
  .peek-caption { font-size: 14px; }
  .sms { padding: 12px 14px 16px; }
  .sms legend { font-size: 18px; }
  .sms-label { font-size: 15px; }
  .sms-row { flex-wrap: wrap; row-gap: 10px; }
  .sms-prefix { font-size: 17px; }
  .sms-input { min-height: 48px; padding: 8px 10px; font-size: 17px; }
  .sms-row .btn { flex-basis: 100%; }
  .sms-fine { font-size: 14px; }
}