/* Halloween: Modern B ("Paper-Cut Night"). Preview skin over v4. Remove data-season to restore v4. */
html[data-season="halloween-modern-b"] {
  --indigo: #171230; --indigo-2: #221A45; --card: #2D2358; --moon: #F4E9C8; --mist: #C9BFE3;
  --lantern: #F59A3C; --moss: #8FD19E; --footer: #0F0B22;
  --sand: var(--indigo); --seafoam: var(--indigo-2); --ink: var(--moon); --muted: var(--mist);
  --kelp: var(--lantern); --sea: var(--moss); --sea-deep: var(--moon); --border: rgb(201 191 227 / .35);
  --driftwood: var(--mist); --kelp-bright: var(--lantern); --sea-mid: var(--indigo-2);
  --seafoam-mid: var(--indigo-2); --kelp-tint: var(--indigo); --foam: var(--moon);
  --display: "Pirata One", Palatino, "Palatino Linotype", serif;
  --font: "Work Sans", "Segoe UI", system-ui, sans-serif;
  overflow-x: clip;
}
html[data-season="halloween-modern-b"] body { background: var(--indigo); color: var(--moon); font-family: var(--font); }
html[data-season="halloween-modern-b"] a { color: var(--lantern); }
html[data-season="halloween-modern-b"] a:focus-visible { outline: 3px solid var(--moon); outline-offset: 3px; }
html[data-season="halloween-modern-b"] :is(.btn-primary, .season-nav-links a[aria-current="page"]):focus-visible { outline-color: var(--indigo); }
html[data-season="halloween-modern-b"] .hero h1 {
  font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 4.8vw, 3.4rem);
  line-height: 1.15; letter-spacing: .01em; color: var(--moon); text-shadow: none;
}
html[data-season="halloween-modern-b"] .section h2 {
  font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  line-height: 1.2; letter-spacing: .01em; color: var(--moon);
}
html[data-season="halloween-modern-b"] .section .wrap.narrow > p { color: var(--moon); }
html[data-season="halloween-modern-b"] :is(.section-intro, .price-group-blurb, .platform-note, .plan-extra, .both-plans) { color: var(--mist); }
html[data-season="halloween-modern-b"] .price-card .plan-extra { color: var(--mist); }

/* 1. Style bar */
html[data-season="halloween-modern-b"] .style-bar {
  background: rgb(15 11 34 / .9); color: var(--moon);
  border-bottom: 1px solid rgb(201 191 227 / .22);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
html[data-season="halloween-modern-b"] .style-bar-label { color: var(--mist); }
html[data-season="halloween-modern-b"] .style-bar-links a {
  color: var(--mist); background: rgb(201 191 227 / .08); border: 1px solid rgb(201 191 227 / .4);
}
html[data-season="halloween-modern-b"] .style-bar-links a:hover,
html[data-season="halloween-modern-b"] .style-bar-links a:focus-visible { background: rgb(201 191 227 / .2); color: var(--moon); }
html[data-season="halloween-modern-b"] .season-nav-links a[aria-current="page"] {
  background: var(--lantern); color: var(--indigo); border-color: var(--lantern);
}
@media (max-width: 639px) {
  html[data-season="halloween-modern-b"] .style-bar-inner,
  html[data-season="halloween-modern-b"] .season-nav-links { min-width: 0; }
}

/* 2. Hero — paper-cut diorama */
html[data-season="halloween-modern-b"] .hero {
  container-type: inline-size;
  min-height: min(92vh, 52rem);
  background: var(--indigo);
  color: var(--moon);
  align-items: flex-end;
  padding-bottom: 20.5rem;
}
html[data-season="halloween-modern-b"] .hero-bg {
  z-index: 0; filter: brightness(.6) saturate(.5) hue-rotate(200deg);
  background: url("../images/season/hero-halloween.jpg") center / cover no-repeat;
}
html[data-season="halloween-modern-b"] .hero-overlay {
  z-index: 1; background: linear-gradient(180deg, rgb(23 18 48 / .4), rgb(23 18 48 / .88) 65%);
}
html[data-season="halloween-modern-b"] .cut-scene { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
html[data-season="halloween-modern-b"] .cut-scene :is(i, b) { position: absolute; display: block; pointer-events: none; }
html[data-season="halloween-modern-b"] .cut-scene :is(.l1, .l2, .l3, .fog) {
  left: 0; right: 0;
  background-repeat: no-repeat; background-position: center bottom; background-size: 100% 100%;
}
html[data-season="halloween-modern-b"] .l1 {
  bottom: 0; height: 45%; z-index: 1;
  background-image: url("../images/season/l1.svg");
  filter: drop-shadow(0 6px 10px rgb(0 0 0 / .45));
}
html[data-season="halloween-modern-b"] .l2 {
  bottom: 6.25rem; height: calc(100cqi * 250 / 1440); z-index: 3;
  background-image: url("../images/season/l2.svg");
  filter: drop-shadow(0 6px 10px rgb(0 0 0 / .45));
}
html[data-season="halloween-modern-b"] .l3 {
  bottom: 0; height: calc(100cqi * 360 / 1440); z-index: 4;
  background-image: url("../images/season/l3.svg");
  filter: drop-shadow(0 6px 10px rgb(0 0 0 / .45));
}
html[data-season="halloween-modern-b"] .fog {
  bottom: 18%; height: 16%; z-index: 2;
  background-image: url("../images/season/fog.svg");
}
html[data-season="halloween-modern-b"] .moon {
  top: 1.5rem; right: max(1.25rem, 6vw); width: 200px; height: 200px; z-index: 5;
  background: url("../images/season/moon.svg") center / contain no-repeat;
  filter: drop-shadow(0 6px 10px rgb(0 0 0 / .45));
}
html[data-season="halloween-modern-b"] .bats {
  top: 1.15rem; height: 160px; width: 340px; z-index: 6;
  right: calc(max(1.25rem, 6vw) + 200px + 36px);
  background: url("../images/season/bats.svg") right center / contain no-repeat;
}
html[data-season="halloween-modern-b"] .win {
  width: 10px; height: 14px; z-index: 2;
  left: calc(1080 / 1440 * 100% - 5px);
  top: calc(208 / 360 * 100% - 7px);
  background: #F59A3C;
  box-shadow: 0 0 8px 2px rgb(245 154 60 / .95), 0 0 22px 7px rgb(245 154 60 / .55);
}
html[data-season="halloween-modern-b"] .hero-inner {
  z-index: 4;
  width: min(26rem, calc(100% - 2rem));
  max-width: 26rem;
  margin-left: max(1rem, calc((100% - 68rem) / 2));
  margin-right: auto;
  text-align: left;
  align-items: flex-start;
  background: rgb(23 18 48 / .86);
  padding: 1.15rem 1.3rem 1.2rem;
}
html[data-season="halloween-modern-b"] .hero-logo { margin-left: 0; margin-right: 0; }
html[data-season="halloween-modern-b"] .hero .lede { color: var(--mist); margin-left: 0; margin-right: 0; }
html[data-season="halloween-modern-b"] .hero-centered .hero-actions { justify-content: flex-start; }
html[data-season="halloween-modern-b"] .hero .hero-hello { color: var(--lantern); opacity: 1; font-weight: 600; }
html[data-season="halloween-modern-b"] .hero-logo-mark { border-radius: 2px; }
html[data-season="halloween-modern-b"] .btn { border-radius: 2px; }
html[data-season="halloween-modern-b"] .btn-primary {
  background: var(--lantern); color: var(--indigo); border: 2px solid var(--lantern); box-shadow: none;
}
html[data-season="halloween-modern-b"] .btn-primary:hover,
html[data-season="halloween-modern-b"] .btn-primary:focus-visible { background: var(--moon); color: var(--indigo); border-color: var(--moon); }
html[data-season="halloween-modern-b"] .hero .btn-ghost {
  background: transparent; color: var(--moon); border: 2px solid var(--mist); border-radius: 2px;
}
html[data-season="halloween-modern-b"] .hero .btn-ghost:hover,
html[data-season="halloween-modern-b"] .hero .btn-ghost:focus-visible { background: rgb(244 233 200 / .12); color: var(--moon); border-color: var(--moon); }
@media (max-width: 1099px) {
  html[data-season="halloween-modern-b"] .hero { padding-top: 16rem; padding-bottom: 18rem; }
  html[data-season="halloween-modern-b"] .moon { width: 140px; height: 140px; top: 5.6rem; right: .8rem; }
  html[data-season="halloween-modern-b"] .bats {
    left: .7rem; right: auto; top: 5.75rem; width: calc(100% - 168px); height: 128px;
  }
}
@media (max-width: 639px) {
  html[data-season="halloween-modern-b"] .hero { padding-top: 16.5rem; padding-bottom: 8rem; }
  html[data-season="halloween-modern-b"] .l1 { height: 30%; bottom: 0; }
  html[data-season="halloween-modern-b"] .l2 { height: 28%; bottom: 0; }
  html[data-season="halloween-modern-b"] .l3 { height: 26%; bottom: 0; }
  html[data-season="halloween-modern-b"] .fog { height: 18%; bottom: 11%; }
  html[data-season="halloween-modern-b"] .moon { width: 112px; height: 112px; top: 6.6rem; right: .4rem; }
  html[data-season="halloween-modern-b"] .bats {
    left: .35rem; right: auto; top: 6.8rem; width: calc(100% - 132px); height: 96px;
  }
  html[data-season="halloween-modern-b"] .win { top: calc(246 / 360 * 100% - 7px); }
  html[data-season="halloween-modern-b"] .hero-inner {
    width: min(100% - 1.5rem, 26rem);
    margin-left: .75rem;
    margin-right: .75rem;
  }
}

/* 3. Photo band */
html[data-season="halloween-modern-b"] .photo-band { position: relative; overflow: visible; background: var(--indigo); padding: 1.4rem .9rem 1.5rem; }
html[data-season="halloween-modern-b"] .photo-band-inner { gap: 1rem; }
html[data-season="halloween-modern-b"] .photo-band-figure {
  position: relative; overflow: visible; padding: 14px; background: var(--indigo-2);
  filter: drop-shadow(0 8px 14px rgb(0 0 0 / .45));
  clip-path: polygon(1.4% 1%, 12% 0, 26% 1.3%, 41% 0, 55% 1.1%, 70% 0, 84% 1.2%, 98.4% .8%, 100% 9%, 98.7% 24%, 100% 41%, 98.8% 58%, 100% 76%, 99% 92%, 97.6% 99.2%, 84% 100%, 68% 98.7%, 52% 100%, 36% 98.8%, 20% 100%, 6% 98.6%, .4% 96%, 0 82%, 1.3% 64%, 0 46%, 1.2% 28%, 0 12%);
}
html[data-season="halloween-modern-b"] .photo-band-figure img { border-radius: 0; }
html[data-season="halloween-modern-b"] .photo-band-copy {
  position: relative; overflow: hidden; background: var(--indigo-2); padding-bottom: 5.6rem;
}
html[data-season="halloween-modern-b"] .photo-band-copy .photo-band-line {
  font-family: var(--font); font-style: italic; font-weight: 500; color: var(--moon);
  font-size: clamp(1.4rem, 2.3vw, 1.7rem); line-height: 1.45;
}
html[data-season="halloween-modern-b"] .photo-band-copy::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 74px; pointer-events: none;
  background: #0F0B22 url("../images/season/l2.svg") center 36% / 150% auto no-repeat;
}

/* Torn sheet edges */
html[data-season="halloween-modern-b"] :is(.photo-band, #help, #pricing, #how, #about, #style-samples, .contact) { position: relative; }
html[data-season="halloween-modern-b"] :is(.photo-band, #help, #pricing, #how, #about, #style-samples, .contact)::before {
  content: ""; position: absolute; left: 0; right: 0; top: -23px; height: 26px; z-index: 4; pointer-events: none;
  -webkit-mask: url("../images/season/torn.svg") center / 100% 100% no-repeat;
  mask: url("../images/season/torn.svg") center / 100% 100% no-repeat;
  filter: drop-shadow(0 -3px 2px rgb(0 0 0 / .4));
}
html[data-season="halloween-modern-b"] .photo-band::before,
html[data-season="halloween-modern-b"] #help::before,
html[data-season="halloween-modern-b"] #how::before,
html[data-season="halloween-modern-b"] #style-samples::before,
html[data-season="halloween-modern-b"] .contact::before { background: var(--indigo); }
html[data-season="halloween-modern-b"] #pricing::before,
html[data-season="halloween-modern-b"] #about::before { background: var(--indigo-2); }

/* 4. Help */
html[data-season="halloween-modern-b"] #help { background: var(--indigo); color: var(--moon); }

/* 5. Pricing */
html[data-season="halloween-modern-b"] #pricing { background: var(--indigo-2); color: var(--moon); border: 0; }
html[data-season="halloween-modern-b"] #pricing :is(h2, h3, h4, p, li) { color: var(--moon); }
html[data-season="halloween-modern-b"] #pricing :is(.price-group, .pay-line) { color: var(--moss); }
html[data-season="halloween-modern-b"] #pricing :is(.section-intro, .price-group-blurb, .platform-note, .plan-extra, .both-plans) { color: var(--mist); }
html[data-season="halloween-modern-b"] .price-card,
html[data-season="halloween-modern-b"] .section-alt .price-card {
  position: relative; background: var(--card); color: var(--moon); border: 0; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 10px 24px rgb(0 0 0 / .35));
  clip-path: polygon(10px 0, calc(100% - 16px) 1px, 100% 12px, calc(100% - 1px) calc(100% - 11px), calc(100% - 14px) 100%, 12px calc(100% - 1px), 0 calc(100% - 15px), 1px 9px);
}
html[data-season="halloween-modern-b"] .price-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22;
  background: url("../images/season/grain.png") center / 140px 140px repeat;
  mix-blend-mode: overlay;
}
html[data-season="halloween-modern-b"] .price-card > * { position: relative; }
html[data-season="halloween-modern-b"] .price-card :is(h4, .price, li) { color: var(--moon); }
html[data-season="halloween-modern-b"] .price-card :is(.note, .plan-extra) { color: var(--mist); }
html[data-season="halloween-modern-b"] .amount { color: var(--lantern); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 2rem; }
html[data-season="halloween-modern-b"] .price-card.featured::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--lantern); pointer-events: none;
}
html[data-season="halloween-modern-b"] .price-card:hover { box-shadow: none; }
html[data-season="halloween-modern-b"] .soft-disclaimer {
  background: transparent; color: var(--mist); border: 1px dashed rgb(201 191 227 / .55); border-radius: 2px;
}

/* 6. How */
html[data-season="halloween-modern-b"] #how { background: var(--indigo); color: var(--moon); }
html[data-season="halloween-modern-b"] #how :is(h2, p) { color: var(--moon); }
html[data-season="halloween-modern-b"] .steps li {
  background: var(--card); color: var(--moon); border: 0; border-radius: 2px;
  box-shadow: 0 8px 18px rgb(0 0 0 / .28);
}
html[data-season="halloween-modern-b"] .steps li::before {
  background: var(--moon); color: var(--indigo); border-radius: 50%;
  font-family: var(--font); font-weight: 700;
}

/* 7. About */
html[data-season="halloween-modern-b"] #about { background: var(--indigo-2); color: var(--moon); border: 0; padding-top: 5.2rem; }
html[data-season="halloween-modern-b"] #about :is(h2, p) { color: var(--moon); }
html[data-season="halloween-modern-b"] #about::after {
  content: ""; position: absolute; top: .85rem; right: .85rem; width: 150px; height: 64px; pointer-events: none;
  background: url("../images/season/bats-trio.svg") right center / contain no-repeat;
}

/* 8. Style samples */
html[data-season="halloween-modern-b"] #style-samples { background: var(--indigo); color: var(--moon); }
html[data-season="halloween-modern-b"] #style-samples :is(h2, p) { color: var(--moon); }
html[data-season="halloween-modern-b"] .style-sample-list a {
  position: relative; background: var(--card) url("../images/season/grain.png") center / 140px repeat; color: var(--moon);
  border: 0; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 8px 16px rgb(0 0 0 / .35));
  clip-path: polygon(8px 0, calc(100% - 12px) 1px, 100% 10px, calc(100% - 1px) calc(100% - 9px), calc(100% - 11px) 100%, 9px 100%, 0 calc(100% - 12px), 1px 8px);
}
html[data-season="halloween-modern-b"] .style-sample-list a:hover,
html[data-season="halloween-modern-b"] .style-sample-list a:focus-visible {
  background: var(--lantern); color: var(--indigo);
}
html[data-season="halloween-modern-b"] .style-sample-list a:focus-visible { outline-color: var(--moon); }
html[data-season="halloween-modern-b"] .style-sample-list a:hover:focus-visible { outline-color: var(--indigo); }

/* 9. Contact — smaller paper-cut band (L2 + L3 + 120px moon) */
html[data-season="halloween-modern-b"] .contact {
  background: var(--indigo); color: var(--moon); border: 0; overflow: visible; padding-bottom: 0;
}
html[data-season="halloween-modern-b"] .contact .wrap { position: relative; z-index: 2; }
html[data-season="halloween-modern-b"] .contact :is(h2, p, .contact-hint) { color: var(--moon); }
html[data-season="halloween-modern-b"] .contact .btn-primary {
  background: var(--lantern); color: var(--indigo); border-color: var(--lantern);
  box-shadow: 0 0 24px rgb(245 154 60 / .35);
}
html[data-season="halloween-modern-b"] .contact .btn-lg { max-width: 100%; white-space: normal; }
html[data-season="halloween-modern-b"] .contact-cut {
  position: relative; z-index: 1; height: 340px; margin-top: 3rem;
  overflow: hidden; pointer-events: none;
}
html[data-season="halloween-modern-b"] .contact-cut :is(i, b) { position: absolute; display: block; pointer-events: none; }
html[data-season="halloween-modern-b"] .cc-l2,
html[data-season="halloween-modern-b"] .cc-l3 {
  left: 0; right: 0; bottom: 0;
  background-repeat: no-repeat; background-position: center bottom; background-size: auto 100%;
  filter: drop-shadow(0 6px 10px rgb(0 0 0 / .45));
}
html[data-season="halloween-modern-b"] .cc-l2 {
  height: 214px; z-index: 1;
  background-image: url("../images/season/contact-l2.svg");
}
html[data-season="halloween-modern-b"] .cc-l3 {
  height: 156px; z-index: 2;
  background-image: url("../images/season/contact-l3.svg");
}
html[data-season="halloween-modern-b"] .cc-moon {
  top: 6px; right: 7%; width: 120px; height: 120px; z-index: 3;
  background: url("../images/season/moon.svg") center / contain no-repeat;
  filter: drop-shadow(0 6px 10px rgb(0 0 0 / .45));
}

/* 10. Footer */
html[data-season="halloween-modern-b"] .site-footer {
  position: relative; background: var(--footer); color: var(--mist); padding-top: 7.6rem; overflow: hidden;
}
html[data-season="halloween-modern-b"] .site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 108px; pointer-events: none;
  background: url("../images/season/l3.svg") center 22% / 118% auto no-repeat;
}
html[data-season="halloween-modern-b"] .footer-inner { position: relative; }
html[data-season="halloween-modern-b"] .footer-inner a { color: var(--moss); }
html[data-season="halloween-modern-b"] .footer-inner a:hover { color: var(--moon); }
html[data-season="halloween-modern-b"] :is(.footer-brand, .site-credit, .photo-credit) { color: var(--mist); }
html[data-season="halloween-modern-b"] .season-credit { font-size: .8rem; margin-top: .4rem !important; }

/* Motion, once */
@media (prefers-reduced-motion: no-preference) {
  html[data-season="halloween-modern-b"] .l1 { animation: pcRise .8s cubic-bezier(.22,1,.36,1) both; }
  html[data-season="halloween-modern-b"] .l2,
  html[data-season="halloween-modern-b"] .cc-l2 { animation: pcRise .8s cubic-bezier(.22,1,.36,1) .15s both; }
  html[data-season="halloween-modern-b"] .l3,
  html[data-season="halloween-modern-b"] .cc-l3 { animation: pcRise .8s cubic-bezier(.22,1,.36,1) .3s both; }
  html[data-season="halloween-modern-b"] .win { animation: pcWin .6s ease 1.05s both; }
  html[data-season="halloween-modern-b"] .bats { animation: pcBats 1s ease .45s both; }
  html[data-season="halloween-modern-b"] .cc-moon { animation: pcWin .8s ease .2s both; }
}
@keyframes pcRise { from { transform: translateY(24px); } to { transform: translateY(0); } }
@keyframes pcWin { from { opacity: 0; } to { opacity: 1; } }
@keyframes pcBats { from { opacity: 0; transform: translate(10px, -4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html[data-season="halloween-modern-b"] :is(.l1, .l2, .l3, .fog, .moon, .bats, .win, .cc-l2, .cc-l3, .cc-moon) {
    animation: none; opacity: 1; transform: none;
  }
}