/* ---- Art Draws Us Together Signup Widget.html line 10 ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --orange: #F75E1C;
  --bg: #070503;
  --card: #110e09;
  --border: rgba(247,94,28,0.18);
  --muted: rgba(255,255,255,0.45);
  --cream: #ffffff;
  --teal: #4ABFB0;
  /* Heading + card tiers, shared with the homepage widget, the Clubhouse
     player and the Clubhouse signup page. */
  --h-section: clamp(31px, 4.4vw, 38px);
  --h-card: 17px;
  --h-card-weight: 800;
  /* Gap between two adjacent carousel rails. */
  --rail-gap: 22px;
}

body { background: var(--bg); color: var(--cream); font-family: 'Poppins', sans-serif; overflow-x: hidden; }

/* ── LAYOUT ── */
.adut-widget { width: 100%; }
/* max-width: 2000px matches the Clubhouse Signup widget so the
   content area spans roughly the same width on wide displays.
   4vw padding (was 0 32px) matches the homepage / clubhouse /
   ADUT homepage / clubhouse-signup widgets so titles and cards
   sit at the same visual position across pages. The 28px / 22px
   mobile overrides are dropped because 4vw scales naturally
   (4vw of 768px = 30.7px, 4vw of 414px = 16.5px). */
.adut-inner { max-width: 2000px; margin: 0 auto; padding: 0 4vw; }
.adut-inner--top { padding-top: 40px; }
.adut-inner--bottom { padding-bottom: 80px; }

@keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes shimmer { 0% { background-position:-600px 0; } 100% { background-position:600px 0; } }
@keyframes badgePulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.4; transform:scale(0.7); } }
@keyframes cardPulse { 0% { transform:scale(1); } 40% { transform:scale(1.025); } 100% { transform:scale(1); } }
@keyframes tickerScroll { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }

/* ── SHARED ── */
.btn {
  background: var(--orange); color: #fff; border: 1px solid rgba(255,255,255,0.8);
  border-radius: 20px; padding: 16px 25px; font-family: 'Poppins', sans-serif;
  font-size: 12px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase;
  text-decoration: none; display: inline-block; cursor: pointer;
  box-shadow: 0 4px 20px rgba(247,94,28,0.3);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  -webkit-appearance: none; appearance: none;
}
.btn:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(247,94,28,0.45); background:#ff7235; }
/* sec-label / sec-title sizes match the Clubhouse Signup widget so
   carousel headers look consistent across signup pages. Was 11px /
   clamp(32px, 3.5vw, 42px) -- noticeably smaller than the Clubhouse
   widget. The mobile override (added below in the existing 768px
   @media block) caps the title at clamp(32px, 9vw, 48px) so it
   doesn't blow out on narrow viewports. */
/* Eyebrows removed -- restore with `display: block`. */
.sec-label { font-size:13px; letter-spacing:3px; text-transform:uppercase; color:var(--orange); display:none; margin-bottom:4px; }
.sec-title { font-size:var(--h-section); font-weight:700; letter-spacing:-0.04em; margin: 0; }
.sec-header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; gap:16px; }
/* "View all" header links are hidden everywhere else now; keep the rules so a
   stray one in the markup can't render bare, but don't show them. */
.sec-link { display:none !important; }
.discount-pill { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--orange); background:rgba(247,94,28,0.1); border:1px solid rgba(247,94,28,0.25); border-radius:20px; padding:5px 12px; margin-bottom:20px; }

/* ── HERO ── */
.adut-hero { display:flex; flex-direction:column; align-items:center; text-align:center; padding-bottom:48px; }
.adut-hero-logo { width:1400px; max-width:90%; height:auto; margin-bottom:24px; opacity:0; transition:opacity 0.4s; content:url('https://images.squarespace-cdn.com/content/5f257383d68fbe07dae9c644/1030045d-53c8-4603-bb73-a3cdc8431c12/art+draws+us+together+banner+logo.png?format=1500w'); }
.adut-hero-logo.loaded { opacity:1; }
@media (max-width:768px) {
  .adut-hero-logo { width:100%; content:url('https://images.squarespace-cdn.com/content/v1/5f257383d68fbe07dae9c644/b7ca8e42-5f2c-4a63-85cd-b225e652ad16/Art+Draws+Us+Together+White+logo.png?format=500w'); }
}
.adut-schedule-badge { display:inline-flex; align-items:center; gap:8px; font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#fff; background:rgba(74,191,176,0.18); border:1px solid rgba(74,191,176,0.5); border-radius:20px; padding:5px 16px; margin-bottom:20px; white-space:nowrap; }
@media (min-width:769px) { .adut-schedule-badge { font-size:25px; } }

.adut-hero-title { font-size:clamp(1.8rem,4.5vw,3rem); font-weight:700; line-height:1.2; margin-bottom:14px; letter-spacing:-0.02em; }
.adut-hero-tagline { font-size:17px; line-height:1.6; color:rgba(255,255,255,0.75); max-width:580px; }
.adut-hero-tagline strong { color:var(--cream); font-weight:600; }

/* ── PROMO BANNER ── */
.promo-banner {
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; gap:12px;
  /* Copy column is CENTRED (2026-08-20, Chris) — eyebrow, headline, caption,
     countdown, CTA and sub-line all sit on the same axis. */
  align-items:center;
  /* Default look when the sale carries no background image; the deal's bgImage
     is applied inline by the script below and paints over this. */
  background:linear-gradient(135deg,#7a1414,#b3261e 45%,#f65e1b);
  background-size:cover; background-position:center;
  border-radius:16px;
  padding:24px 30px 22px 30px;
  margin:0 auto 28px; max-width:720px; width:100%; min-height:160px;
  box-shadow:0 12px 32px rgba(0,0,0,0.4);
  text-align:center; color:#f6efe5;
}
/* Scrim keeping the copy legible over whatever art the sale supplies. Only
   painted when there IS a background image; with a character it fades out
   before the cutout so the character stays bright. */
.promo-banner.has-bg::before {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(12,17,12,0.9) 0%, rgba(12,17,12,0.78) 55%, rgba(12,17,12,0.62) 100%);
}
.promo-banner.has-bg.has-char::before {
  background:linear-gradient(90deg, rgba(12,17,12,0.93) 0%, rgba(12,17,12,0.82) 44%, rgba(12,17,12,0.4) 66%, rgba(12,17,12,0) 88%);
}
/* Reserve the right-hand column only when this sale actually has a character. */
.promo-banner.has-char { padding-right:250px; }
/* The sale's character cutout, matching the deals hero. Nothing campaign-specific
   lives here any more — the URL comes from the deal's charImage. */
.promo-char {
  position:absolute; right:0; bottom:-8%; width:250px; height:auto; z-index:2;
  filter:drop-shadow(-14px 8px 18px rgba(0,0,0,0.3)); pointer-events:none; user-select:none;
}
.promo-banner > *:not(.promo-char) { position:relative; z-index:3; }
@keyframes promoShine { 0%{transform:translateX(-100%);} 60%{transform:translateX(100%);} 100%{transform:translateX(100%);} }
.promo-banner-headline { font-size:15px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--orange); line-height:1.3; }
.promo-banner-headline strong { color:#fff; }
.promo-banner-sub { font-size:11px; color:rgba(255,255,255,0.65); letter-spacing:0.5px; }
.promo-countdown { display:flex; align-items:flex-start; justify-content:center; gap:4px; }
.promo-cd-unit { display:flex; flex-direction:column; align-items:center; min-width:68px; padding:0 6px; }
.promo-cd-num { font-size:44px; font-weight:900; color:#fff; line-height:1; font-variant-numeric:tabular-nums; }
.promo-cd-lbl { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.55); margin-top:8px; font-weight:600; }
.promo-cd-sep { font-size:38px; color:rgba(247,94,28,0.55); font-weight:900; line-height:1; align-self:flex-start; padding-top:3px; }
@media (max-width:768px) {
  /* Tablet/phone: copy centered over the character (darkened), no reserved column. */
  .promo-banner, .promo-banner.has-char { padding:20px 18px; gap:12px; align-items:center; text-align:center; }
  .promo-banner-headline { font-size:13px; }
  .promo-banner.has-bg::before, .promo-banner.has-bg.has-char::before { background:linear-gradient(to top, rgba(10,14,10,0.96) 0%, rgba(10,14,10,0.9) 44%, rgba(10,14,10,0.78) 70%, rgba(10,14,10,0.5) 100%); }
  .promo-char { width:60%; right:-8%; bottom:-6%; filter:drop-shadow(-14px 8px 18px rgba(0,0,0,0.3)) brightness(.58); }
  /* Match the deals countdown on mobile: centered units, even gap, no separators. */
  .promo-countdown { justify-content:center; gap:20px; }
  .promo-cd-sep { display:none; }
  .promo-cd-unit { min-width:0; padding:0; flex:0 0 auto; }
  .promo-cd-num { font-size:clamp(28px,10vw,40px); }
  .promo-cd-lbl { font-size:9px; margin-top:6px; }
}

.plan-promo-tag {
  display:none; font-size:10px; font-weight:800; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--orange);
  background:rgba(247,94,28,0.15); border:1px solid rgba(247,94,28,0.45);
  border-radius:12px; padding:3px 10px; margin-top:8px;
}
.plan-promo-tag.visible { display:inline-block; }

/* ── PLANS ── */
.adut-plans-header { text-align:center; margin-bottom:32px; }
.adut-plans-header h2 { font-size:clamp(22px,3vw,32px); font-weight:700; letter-spacing:-0.03em; }

.billing-toggle-wrap { display:flex; align-items:center; justify-content:center; margin-bottom:32px; }
.billing-toggle { display:flex; background:#1a1208; border:1px solid var(--border); border-radius:40px; padding:4px; position:relative; }
.billing-toggle input[type="radio"] { display:none; }
.billing-toggle label { padding:5px 18px; border-radius:30px; font-size:12px; font-weight:600; cursor:pointer; color:var(--muted); transition:color 0.2s; position:relative; z-index:1; user-select:none; }
.billing-toggle input[type="radio"]:checked + label { color:#fff; }
.toggle-slider { position:absolute; top:4px; bottom:4px; border-radius:30px; background:var(--orange); box-shadow:0 2px 10px rgba(247,94,28,0.4); transition:left 0.25s cubic-bezier(0.4,0,0.2,1), width 0.25s cubic-bezier(0.4,0,0.2,1); pointer-events:none; }

.adut-plans-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; max-width:900px; margin:0 auto; }

.adut-plan-card {
  background:var(--card); border:1px solid var(--border); border-radius:20px;
  padding:52px 28px 36px; position:relative; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between; text-align:center;
  aspect-ratio:1/1;
  transition:border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.adut-plan-card::before { content:''; position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(0.22); z-index:0; border-radius:20px; }
.adut-plan-card * { position:relative; z-index:1; }
.adut-plan-card[data-plan="art"]::before { background-image:url('https://images.squarespace-cdn.com/content/v1/5f257383d68fbe07dae9c644/5b4e9186-2922-441c-9dd3-4b481ee0f395/Art+Draws+Us+Together+Background.jpg?format=1500w'); }
.adut-plan-card[data-plan="bundle"]::before { background-image:url('https://images.squarespace-cdn.com/content/5f257383d68fbe07dae9c644/fc1eaf2a-045d-4028-a23d-7314989c6ac2/Wood+Panel+3.jpg?format=1500w'); filter:brightness(0.22); }
.adut-plan-card:hover { border-color:rgba(247,94,28,0.4); transform:translateY(-2px); box-shadow:0 12px 40px rgba(0,0,0,0.4); }
.adut-plan-card.active { border-color:var(--orange); box-shadow:0 0 0 1px var(--orange), 0 16px 48px rgba(247,94,28,0.15); }
.adut-plan-card.pulse { animation:cardPulse 0.4s ease; }

.plan-badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--orange); color:#fff; font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:5px 16px; border-radius:20px; white-space:nowrap; border:1px solid rgba(255,255,255,0.4); z-index:10; }
/* ── Reframed price deal line ── */
.plan-price.is-free { color:var(--orange); }
.plan-deal { font-size:12.5px; margin-top:6px; line-height:1.3; }
.plan-deal.muted { color:#8a7a68; font-weight:600; }
.plan-deal.free { color:#38c765; font-weight:700; }
.plan-deal.fade { opacity:0; }
.adut-plan-logo { height:130px; width:auto; max-width:260px; object-fit:contain; margin-bottom:16px; opacity:0; transition:opacity 0.3s; }
.adut-plan-logo.loaded { opacity:1; }
.plan-was { font-size:15px; color:var(--muted); text-decoration:line-through; display:block; visibility:hidden; opacity:0; font-weight:700; }
.plan-was.visible { visibility:visible; opacity:1; }
.plan-price { font-size:46px; font-weight:900; color:var(--orange); letter-spacing:-0.04em; line-height:1; }
.plan-period { font-size:13px; color:var(--muted); display:block; margin-bottom:0; }
.plan-price.fade, .plan-period.fade { opacity:0; }
.adut-plan-card .btn { margin-top:20px; width:100%; text-align:center; }

/* ── BENEFITS ── */
.benefits-panel { display:none; margin-top:36px; padding-top:36px; border-top:1px solid var(--border); }
.benefits-panel.active { display:block; }
.benefits-label { font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:20px; display:block; }
.benefits-list { list-style:none; columns:2; column-gap:48px; text-align:left; }
.benefits-list li { font-size:15px; font-weight:600; color:var(--cream); padding:10px 0 10px 28px; position:relative; border-bottom:1px solid rgba(255,255,255,0.06); break-inside:avoid; }
.benefits-list li:last-child { border-bottom:none; }
.benefits-list li::before { content:'✓'; position:absolute; left:0; color:var(--orange); font-weight:700; }
@media (max-width:900px) { .benefits-list { columns:1; } }

.trial-note { margin-top:24px; font-size:13px; color:var(--muted); text-align:center; }
.trial-note strong { color:var(--cream); }

/* ── TICKER ── */
.adut-ticker-outer { width:100%; overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(74,191,176,0.04); margin-top:36px; }
.adut-ticker-link { display:block; text-decoration:none; cursor:pointer; }
.adut-ticker-track { display:flex; align-items:center; width:max-content; animation:tickerScroll 30s linear infinite; }
.adut-ticker-link:hover .adut-ticker-track { animation-play-state:paused; }
.adut-ticker-item { display:inline-flex; align-items:center; padding:16px 0; white-space:nowrap; color:rgba(255,255,255,0.55); font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; flex-shrink:0; transition:color 0.2s; }
.adut-ticker-link:hover .adut-ticker-item { color:var(--teal); }
.adut-ticker-dot { width:6px; height:6px; border-radius:50%; background:var(--teal); opacity:0.5; flex-shrink:0; margin:0 28px; transition:opacity 0.2s; }
.adut-ticker-link:hover .adut-ticker-dot { opacity:1; }

/* ── WHAT TO EXPECT ── */
.expect-section { padding-top:60px; }
.expect-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px; }
.expect-card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:28px 24px; transition:border-color 0.2s; }
.expect-card:hover { border-color:rgba(247,94,28,0.35); }
.expect-icon { font-size:28px; margin-bottom:14px; display:block; }
.expect-card h3 { font-size:15px; font-weight:700; letter-spacing:-0.01em; margin-bottom:8px; color:var(--cream); }
.expect-card p { font-size:13px; line-height:1.65; color:rgba(255,255,255,0.55); }
@media (max-width:900px) { .expect-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .expect-grid { grid-template-columns:1fr; } }

/* ── JACKEY ── */
.jackey-section { padding-top:60px; }
.jackey-inner { display:grid; grid-template-columns:1fr 1.7fr; gap:56px; align-items:center; }
.jackey-img-wrap { border-radius:20px; overflow:hidden; border:1px solid var(--border); box-shadow:0 24px 60px rgba(0,0,0,0.5); aspect-ratio:4/5; }
.jackey-img-wrap img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; opacity:0; transition:opacity 0.4s; }
.jackey-img-wrap img.loaded { opacity:1; }
.jackey-copy h2 { font-size:clamp(32px,4vw,48px); font-weight:700; letter-spacing:-0.03em; line-height:1.1; margin-bottom:6px; font-family:'Poppins',sans-serif; }
.jackey-subtitle { font-size:13px; font-weight:600; color:var(--teal); letter-spacing:0.5px; margin-bottom:18px; display:block; font-family:'Poppins',sans-serif; }
.jackey-copy p { font-size:15px; line-height:1.7; color:rgba(255,255,255,0.65); margin-bottom:14px; font-family:'Poppins',sans-serif; }
@media (max-width:900px) { .jackey-inner { grid-template-columns:1fr; gap:32px; } .jackey-img-wrap { aspect-ratio:auto; max-width:480px; margin:0 auto; } }

/* ── CAROUSELS ── */
.carousel-section { padding-top:60px; }
/* Rail on rail uses the carousel rhythm, not the page's editorial gap. */
.carousel-section + .carousel-section { padding-top:var(--rail-gap); }
/* Carousel bleeds to the .adut-inner edges via -4vw margins, so the
   tiles can extend past the inner's 4vw padding into the gutter where
   the fades live. The carousel keeps 4vw of internal padding so card
   1's left edge still aligns with the section title. Mask-image
   gradients (below) handle the fades on both sides; the fade only
   touches the 4vw gutter, never visible card content. Mirrors the
   homepage / clubhouse / ADUT homepage widgets' pattern. */
.carousel-wrap {
  position:relative;
  margin-left: -4vw;
  margin-right: -4vw;
}
.carousel-wrap.at-start .carousel {
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 4vw), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 4vw), transparent 100%);
}
.carousel-wrap:not(.at-start):not(.at-end) .carousel {
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 4vw, black calc(100% - 4vw), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 4vw, black calc(100% - 4vw), transparent 100%);
}
.carousel-wrap.at-end .carousel {
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 4vw, black);
  mask-image: linear-gradient(to right, transparent 0, black 4vw, black);
}
.carousel-wrap.at-start.at-end .carousel {
  -webkit-mask-image: none;
  mask-image: none;
}
.carousel {
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding: 6px 4vw 12px;
  scroll-padding-left: 4vw;
}
.carousel::-webkit-scrollbar { display:none; }
/* Card formula stays parent-relative because of the .adut-inner
   max-width: 2000px cap. Switching to (92vw - 60px) / 4 would
   overflow on viewports wider than ~2173px, where the inner is
   capped and 92vw outgrows the available content area. */
.carousel > * { scroll-snap-align:start; flex:0 0 calc((100% - 60px) / 4); width:calc((100% - 60px) / 4); }
.carousel-arrow { position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%; background:rgba(15,10,4,0.92); border:1px solid var(--border); color:#fff; cursor:pointer; z-index:10; display:flex; align-items:center; justify-content:center; transition:background 0.2s, border-color 0.2s, opacity 0.2s; backdrop-filter:blur(8px); }
.carousel-arrow:hover { background:var(--orange); border-color:var(--orange); }
.carousel-arrow.prev { left:-19px; }
.carousel-arrow.next { right:-19px; }
.carousel-arrow.hidden { opacity:0; pointer-events:none; }
/* Mobile carousel: card width = 92vw so a single card fills the
   content area (4vw to 96vw) edge-to-edge. Next card peeks past
   the right content edge into the 4vw gutter, where the right
   fade sits. The bleed margins and mask-image rules are inherited
   from the desktop block above -- only the card width and a few
   small overrides change here. */
@media (max-width:768px) {
  .carousel-arrow { display:none; }
  :root { --h-card:16px; --rail-gap:16px; }
  .sec-header { margin-bottom:6px; }
  .carousel > * { flex:0 0 92vw !important; width:92vw !important; }
}

/* ── CARDS ── */
.skel { background:linear-gradient(90deg,#1a1208 25%,#261a0e 50%,#1a1208 75%); background-size:600px 100%; animation:shimmer 1.4s infinite linear; border-radius:16px; }

.session-card { background:#1a1208; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:var(--cream); transition:transform 0.2s, border-color 0.2s; border:1px solid rgba(247,94,28,0.18); }
.session-card:hover { transform:translateY(-4px); border-color:rgba(247,94,28,0.55); }
.session-thumb { width:100%; aspect-ratio:1/1; position:relative; background:#0e0b06; overflow:hidden; flex-shrink:0; }
.session-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 0.3s, transform 0.3s; }
.session-thumb img.loaded { opacity:1; }
.session-card:hover .session-thumb img { transform:scale(1.05); }
.session-overlay { position:absolute; inset:0; background:rgba(0,0,0,0); display:flex; align-items:center; justify-content:center; transition:background 0.25s; }
.session-card:hover .session-overlay { background:rgba(0,0,0,0.6); }
.session-overlay-label { padding:16px; font-size:14px; font-weight:700; color:#fff; opacity:0; transform:translateY(6px); transition:opacity 0.25s, transform 0.25s; text-align:center; }
.session-card:hover .session-overlay-label { opacity:1; transform:translateY(0); }

.artwork-card { background:#1a1208; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:var(--cream); transition:transform 0.2s, border-color 0.2s; border:1px solid rgba(247,94,28,0.18); }
.artwork-card:hover { transform:translateY(-4px); border-color:rgba(247,94,28,0.55); }
.artwork-thumb { width:100%; aspect-ratio:1/1; position:relative; background:#0e0b06; overflow:hidden; flex-shrink:0; }
.artwork-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 0.3s, transform 0.3s; }
.artwork-thumb img.loaded { opacity:1; }
.artwork-card:hover .artwork-thumb img { transform:scale(1.05); }
.artwork-overlay { position:absolute; inset:0; background:rgba(0,0,0,0); display:flex; align-items:center; justify-content:center; transition:background 0.25s; }
.artwork-card:hover .artwork-overlay { background:rgba(0,0,0,0.55); }
.artwork-overlay-label { padding:16px; font-size:14px; font-weight:700; color:#fff; opacity:0; transform:translateY(6px); transition:opacity 0.25s, transform 0.25s; text-align:center; }
.artwork-card:hover .artwork-overlay-label { opacity:1; transform:translateY(0); }

.product-card { background:#1a1208; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:var(--cream); transition:transform 0.2s, border-color 0.2s; border:1px solid rgba(247,94,28,0.18); }
.product-card:hover { transform:translateY(-4px); border-color:rgba(247,94,28,0.55); }
.product-img { width:100%; aspect-ratio:1/1; flex-shrink:0; position:relative; background:#0e0b06; overflow:hidden; }
.product-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 0.3s; }
.product-img img.loaded { opacity:1; }
.product-soldout { position:absolute; top:10px; right:10px; background:#c0392b; color:#fff; font-size:9px; font-weight:700; letter-spacing:1px; padding:4px 10px; border-radius:10px; border:1px solid rgba(255,255,255,0.5); }
.product-info { padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; }
.product-name { font-size:15px; font-weight:700; letter-spacing:-0.3px; line-height:1.35; margin:0; color:var(--cream); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-price { font-size:13px; font-weight:700; color:var(--orange); margin:0; }
.product-price-orig { font-size:11px; color:var(--muted); text-decoration:line-through; margin-left:6px; font-weight:400; }
.product-member-tag { font-size:10px; font-weight:600; color:rgba(247,94,28,0.75); letter-spacing:0.3px; text-transform:uppercase; margin-left:4px; }

.download-card { background:#1a1208; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:var(--cream); transition:transform 0.2s, box-shadow 0.2s, border-color 0.2s; flex:0 0 calc((100% - 60px) / 4) !important; width:calc((100% - 60px) / 4) !important; border:1px solid rgba(247,94,28,0.18); }
.download-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,0.5); border-color:rgba(247,94,28,0.55); }
.download-img { width:100%; aspect-ratio:2/3; flex-shrink:0; position:relative; background:#0e0b06; overflow:hidden; }
.download-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 0.3s; }
.download-img img.loaded { opacity:1; }
@media (max-width:768px) { .download-card { flex:0 0 92vw !important; width:92vw !important; } }

.cta-tile { background:transparent; border:1px solid var(--border); border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-decoration:none; color:var(--cream); padding:28px 20px; cursor:pointer; transition:border-color 0.2s, background 0.2s; }
.cta-tile:hover { border-color:var(--orange); background:rgba(247,94,28,0.05); }
.cta-icon { width:44px; height:44px; border-radius:50%; background:var(--orange); border:1px solid rgba(255,255,255,0.8); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(247,94,28,0.35); transition:transform 0.2s; }
.cta-tile:hover .cta-icon { transform:scale(1.1); }
.cta-tile span { font-size:14px; font-weight:700; text-align:center; }

/* ── EVENTS ── */
.di-event { background:rgba(30,20,10,0.85); border:1px solid rgba(247,94,28,0.2); border-radius:16px; overflow:hidden; cursor:pointer; transition:transform 0.2s, border-color 0.2s; flex:0 0 calc((100% - 60px) / 4); width:calc((100% - 60px) / 4); scroll-snap-align:start; }
.di-event:hover { transform:translateY(-3px); border-color:rgba(247,94,28,0.55); }
.di-thumb { width:100%; aspect-ratio:16/9; background:rgba(255,255,255,0.04); overflow:hidden; }
.di-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.di-no-thumb { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.di-body { padding:14px 16px 16px; }
/* Card kicker: Barlow Condensed orange, as on every other event tile. */
.di-tile-date { font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--orange); margin-bottom:4px; }
.di-title { font-size:var(--h-card); font-weight:var(--h-card-weight); color:#fff; line-height:1.35; letter-spacing:-0.3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:6px; }
.di-time { font-size:12px; color:rgba(255,255,255,0.35); }
.di-badge-art { display:inline-block; background:rgba(56,189,148,0.15); color:#4dd6a8; border:1px solid rgba(56,189,148,0.25); font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; padding:3px 8px; border-radius:4px; margin-left:6px; }
@media (max-width:768px) { .di-event { flex:0 0 92vw !important; width:92vw !important; } }

/* (Removed: ~17 lines of #di-overlay + #di-modal + #di-m-* +
   .di-cal-* CSS for the event detail modal. The modal these
   styled lives in the site header injection now, opened via
   window.openHeaderEventModal(rawEvent). Note: the .di-event
   carousel-tile classes that REMAIN above this comment are
   structurally unrelated -- those style the inline event tiles
   in the events carousel, not the popup.) */

/* ── MOBILE PLANS ── */
@media (max-width:700px) { .adut-plans-grid { grid-template-columns:1fr; max-width:380px; } .adut-plan-card { aspect-ratio:auto; padding:44px 24px 32px; } }

/* ── TOOLTIP ── */
#adut-tip { position:fixed; background:#1e1508; border:1px solid rgba(247,94,28,0.4); color:rgba(255,255,255,0.9); font-family:'Poppins',sans-serif; font-size:12px; line-height:1.5; padding:10px 14px; border-radius:10px; max-width:240px; box-shadow:0 8px 24px rgba(0,0,0,0.5); pointer-events:none; opacity:0; z-index:9999; transition:opacity 0.15s; }
#adut-tip.visible { opacity:1; }

/* Hide native Squarespace pricing section — blocks are used directly by widget */
section[data-section-id="69cd974d6352dc77676863ef"] { display:none !important; }

/* (Removed: a leftover ~16-line block that duplicated .sec-label /
   .sec-title / .sec-header / .discount-pill / .carousel rules with
   slight differences -- e.g. .carousel padding was 4px 0 (no bottom)
   instead of the original 6px 0 12px, which was overriding the real
   rule via cascade. The block was prefaced by the giveaway comment
   "...all your existing styles above..." so it was clearly a
   paste-merge artifact that never got cleaned up.) */

/* Perk ticker — replaces the old bordered .discount-pill. Full-bleed scrolling
   text with no border and no shading. The repeats are built by JS from the
   data-perk attribute so the -50% loop is seamless at any width. */
.perk-ticker {
  display: block;
  margin: -6px -4vw 18px;
  overflow: hidden;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 6vw, black calc(100% - 6vw), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 6vw, black calc(100% - 6vw), transparent 100%);
}
.perk-ticker-track { display: flex; align-items: center; width: max-content; animation: tickerScroll 30s linear infinite; }
.perk-ticker:hover .perk-ticker-track { animation-play-state: paused; }
.perk-ticker-item { display: inline-flex; align-items: center; padding: 4px 0; white-space: nowrap; color: var(--orange); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; flex-shrink: 0; transition: color 0.2s; }
a.perk-ticker:hover .perk-ticker-item { color: #ff7235; }
.perk-ticker-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); opacity: 0.45; flex-shrink: 0; margin: 0 24px; }
@media (max-width: 768px) {
  .perk-ticker-item { font-size: 10px; letter-spacing: 1.5px; }
  .perk-ticker-dot { margin: 0 16px; }
  .perk-ticker { margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { .perk-ticker-track { animation: none; } }