/* Halloween 2026 seasonal sales page (/occasions/halloween) — campaign plan
   approved 2026-09-10. A COMMITTED DARK page: the deliberate seasonal
   exception to the light public-page convention (founder call in the plan's
   visual brief). Scoped to its own occh-* namespace so occasions.css, shared
   by twenty-plus pages, is never touched (the occ-shell-dark lesson).

   Colors ride tokens.css wherever a token exists; the few seasonal extras
   (deep hero black, candle amber, glow alphas) are page-local custom
   properties below — they belong to this one page and die with the season,
   so they deliberately do not enter tokens.css. */

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/fonts/PlusJakartaSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
}

:root {
    --occh-hero-bg: #0c0b0e;          /* deeper than --color-bg: the hero's night */
    --occh-amber: #e0a458;            /* candle / signal accent, decorative only */
    --occh-amber-dim: rgba(224, 164, 88, 0.55);
    --occh-glow: rgba(255, 107, 107, 0.10);
    --occh-ink-on-accent: #241012;    /* text on coral fills */
    --occh-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    --occh-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.occh-body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text-primary);
    font-family: var(--occh-sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* The storefront controller reveals [data-occ-free] and hides [data-occ-paid]
   while the free-first offer is live (beamlanding.css owns this class on its
   own pages; this page defines its own copy). */
.occ-free-hidden { display: none !important; }

/* ---------- header ---------- */
.occh-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    max-width: 1040px;
    margin: 0 auto;
}
.occh-logo img { height: 28px; display: block; }
.occh-nav { display: flex; gap: 24px; }
.occh-nav a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 14px;
}
.occh-nav a:hover, .occh-nav a:focus-visible { color: var(--color-text-primary); }
a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- hero ---------- */
.occh-hero {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background:
        radial-gradient(900px 480px at 72% 30%, var(--occh-glow), transparent 60%),
        radial-gradient(1200px 700px at 50% 110%, rgba(224, 164, 88, 0.05), transparent 60%),
        var(--occh-hero-bg);
}
.occh-hero::before { /* film grain, one tiny inline SVG, zero requests */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
.occh-hero::after { /* vignette */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(5, 4, 7, 0.55) 100%);
}
#occh-bats {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.occh-scanline {
    position: absolute;
    left: 0;
    right: 0;
    top: 30%;
    height: 44px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    opacity: 0;
    pointer-events: none;
}
.occh-hero.flick .occh-hero-in { animation: occh-flick-a 150ms steps(2, end) 1; }
.occh-hero.flick .occh-scanline { animation: occh-flick-b 150ms linear 1; }
@keyframes occh-flick-a {
    0% { filter: brightness(1.16) contrast(1.04); transform: translateX(0.5px); }
    100% { filter: none; transform: none; }
}
@keyframes occh-flick-b {
    0% { opacity: 1; transform: translateY(-30px); }
    100% { opacity: 0; transform: translateY(50px); }
}
.occh-hero-in {
    position: relative;
    z-index: 2;
    max-width: 1040px;
    margin: 0 auto;
    padding: 48px 20px 72px;
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}
.occh-hero-copy { flex: 1 1 320px; min-width: 0; }
.occh-eyebrow {
    font-family: var(--occh-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--occh-amber);
    margin: 0 0 16px;
}
.occh-hero h1 {
    font-size: clamp(32px, 5.6vw, 50px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 16px;
}
.occh-hero h1 em { font-style: normal; color: var(--color-accent); }
.occh-lede {
    color: var(--color-text-secondary);
    font-size: 17px;
    max-width: 46ch;
    margin: 0 0 24px;
}
.occh-btn {
    display: inline-block;
    background: var(--color-accent);
    color: var(--occh-ink-on-accent);
    font-family: var(--occh-sans);
    font-weight: 600;
    font-size: 16px;
    border: 0;
    border-radius: 10px;
    padding: 14px 28px;
    cursor: pointer;
}
.occh-btn:hover { filter: brightness(1.08); }
.occh-btn:disabled { opacity: 0.5; cursor: default; }
.occh-btn-quiet {
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-family: var(--occh-sans);
    font-size: 14px;
    border-radius: 10px;
    padding: 8px 16px;
    cursor: pointer;
}
.occh-price { color: var(--color-text-secondary); font-size: 14px; margin: 12px 0 0; max-width: 46ch; }
.occh-status { color: var(--color-accent); font-size: 14px; margin: 8px 0 0; min-height: 1em; }
.occh-trust-line { color: var(--color-text-secondary); font-size: 13.5px; margin: 16px 0 0; }
.occh-coords {
    position: absolute;
    z-index: 2;
    left: 20px;
    bottom: 12px;
    font-family: var(--occh-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    pointer-events: none;
}

/* ---------- hero phone + envelope ---------- */
.occh-stage { flex: 0 1 300px; margin-inline: auto; }
.occh-phone {
    width: min(270px, 76vw);
    aspect-ratio: 9 / 17;
    margin: 0 auto;
    background: linear-gradient(180deg, #201c25, #17141b);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 32px;
    position: relative;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}
.occh-rec {
    position: absolute;
    top: 16px;
    left: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--occh-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: var(--color-text-secondary);
}
.occh-recdot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    animation: occh-pulse 2.2s ease-in-out infinite;
}
@keyframes occh-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}
.occh-tstamp {
    position: absolute;
    bottom: 16px;
    right: 18px;
    font-family: var(--occh-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
}
.occh-env {
    width: 66%;
    position: relative;
    filter: drop-shadow(0 14px 30px rgba(255, 107, 107, 0.22));
}
.occh-env-body {
    aspect-ratio: 10 / 6.6;
    background: var(--color-accent);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.occh-env-flap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 58%;
    background: #e35555;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.occh-env-seal {
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    width: 20%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #b23a3a;
    border: 2px solid rgba(36, 16, 18, 0.35);
}
.occh-env-to {
    margin: 12px 0 0;
    text-align: center;
    font-family: var(--occh-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* ---------- pumpkins laying around ---------- */
.occh-pumpkins { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.occh-svg-defs { position: absolute; }
.occh-jack { position: absolute; }
.occh-jack svg { display: block; width: 100%; height: auto; }
.occh-jack::before { /* warm ground spill from the candle */
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6%;
    width: 150%;
    aspect-ratio: 3 / 1;
    transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 168, 74, 0.16), transparent 70%);
}
.occh-jack-b::before { display: none; }
.occh-jack-face { filter: drop-shadow(0 0 5px rgba(255, 160, 60, 0.85)); }
.occh-jack-a { width: 84px; right: 6%; bottom: 12px; }
.occh-jack-b { width: 52px; right: calc(6% + 88px); bottom: 8px; transform: rotate(-16deg); opacity: 0.85; }
.occh-jack-c { width: 58px; left: 22%; bottom: 34px; opacity: 0.9; } /* clears the coords label */
.occh-jack-a .occh-jack-face { animation: occh-candle 3.4s ease-in-out infinite; }
.occh-jack-c .occh-jack-face { animation: occh-candle 4.7s ease-in-out infinite 0.9s; }
@keyframes occh-candle {
    0%, 100% { opacity: 1; }
    43% { opacity: 0.72; }
    58% { opacity: 0.95; }
    76% { opacity: 0.66; }
}

/* ---------- shared section shell ---------- */
.occh-main { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.occh-section { padding: 48px 0 8px; }
.occh-section h2 {
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 8px;
}
.occh-sub { color: var(--color-text-secondary); margin: 0 0 24px; max-width: 60ch; }

/* ---------- four beats ---------- */
.occh-beats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.occh-beats li {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    color: var(--color-text-secondary);
    font-size: 14.5px;
}
.occh-beats strong { display: block; color: var(--color-text-primary); margin-bottom: 4px; }

/* ---------- reaction proof (labeled demonstration until the real,
   permissioned pair ships — the plan's rights rule) ---------- */
.occh-proof-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.occh-proof-pair figure { margin: 0; }
.occh-proof-static, .occh-proof-frame {
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background:
        radial-gradient(70% 70% at 50% 45%, rgba(255, 255, 255, 0.06), transparent 70%),
        var(--occh-hero-bg);
    position: relative;
    overflow: hidden;
}
.occh-proof-mark, .occh-proof-frame-label {
    position: absolute;
    left: 14px;
    bottom: 12px;
    font-family: var(--occh-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--occh-amber-dim);
}
.occh-proof-frame .occh-recdot { position: absolute; top: 14px; left: 14px; }
.occh-proof-frame::after { /* the PiP corner, the product's real geometry */
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34%;
    aspect-ratio: 3 / 4;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.05);
}
.occh-proof-pair figcaption {
    color: var(--color-text-secondary);
    font-size: 13px;
    margin-top: 8px;
}
.occh-demo-note {
    font-family: var(--occh-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 16px 0 0;
}

/* ---------- three steps ---------- */
.occh-steps {
    list-style: none;
    counter-reset: occh-step;
    margin: 16px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
}
.occh-steps li {
    counter-increment: occh-step;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px 16px 16px 56px;
    position: relative;
}
.occh-steps li::before {
    content: counter(occh-step);
    position: absolute;
    left: 16px;
    top: 16px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--occh-ink-on-accent);
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.occh-steps p { margin: 4px 0 0; color: var(--color-text-secondary); font-size: 14.5px; }

/* ---------- "what they'll open" demo (controller-wired: occasions-page.js
   toggles .open on [data-occ-demo] via the .occ-demo-env button) ---------- */
.occh-demo { text-align: center; margin-top: 8px; }
.occh-demo-stage {
    position: relative;
    max-width: 320px;
    margin: 0 auto;
    aspect-ratio: 4 / 5;
    background: var(--occh-hero-bg);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.occh-demo .occ-demo-env {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 62%;
    height: 42%;
    background: var(--color-accent);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.occh-demo .occ-demo-env::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 58%;
    background: #e35555;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.occh-demo .occ-demo-env::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    width: 18%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #b23a3a;
}
.occh-demo.open .occ-demo-env {
    transform: translateY(24px) scale(0.9);
    opacity: 0;
    pointer-events: none;
}
.occh-demo-card {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease 0.25s, transform 0.5s ease 0.25s;
    pointer-events: none;
}
.occh-demo.open .occh-demo-card { opacity: 1; transform: none; }
.occh-demo-eyebrow {
    font-family: var(--occh-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--occh-amber);
    margin: 0;
}
.occh-demo-for { font-size: 22px; font-weight: 600; margin: 0; }
.occh-demo-msg { color: var(--color-text-secondary); font-size: 14.5px; margin: 0; }
.occh-demo-hint { color: var(--color-text-muted); font-size: 12.5px; margin: 12px 0 0; }
.occh-demo .occ-demo-replay { margin-top: 12px; }

/* ---------- use cases ---------- */
.occh-cases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 16px;
}
.occh-case {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
}
.occh-case strong { display: block; margin-bottom: 4px; }
.occh-case p { margin: 0; color: var(--color-text-secondary); font-size: 14.5px; }

/* ---------- trust and FAQ ---------- */
.occh-safety ul {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
    max-width: 68ch;
}
.occh-safety li {
    padding-left: 24px;
    position: relative;
    color: var(--color-text-secondary);
}
.occh-safety li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
}
.occh-faq details {
    border-bottom: 1px solid var(--color-border);
    padding: 4px 0;
    max-width: 68ch;
}
.occh-faq summary {
    cursor: pointer;
    padding: 12px 0;
    font-weight: 600;
    list-style-position: outside;
}
.occh-faq details p { margin: 0 0 16px; color: var(--color-text-secondary); }

/* ---------- closer + footer ---------- */
.occh-closer { text-align: center; padding-bottom: 48px; }
.occh-closer-sub { margin: 12px auto 0; }
.occh-footer {
    border-top: 1px solid var(--color-border);
    max-width: 1040px;
    margin: 0 auto;
    padding: 24px 20px 40px;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.occh-footer a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 13.5px;
}
.occh-footer a:hover, .occh-footer a:focus-visible { color: var(--color-text-secondary); }

/* ---------- small screens + reduced motion ---------- */
@media (max-width: 700px) {
    .occh-hero-in { padding-top: 36px; padding-bottom: 84px; }
    .occh-jack-a { width: 64px; right: 5%; }
    .occh-jack-b { width: 40px; right: calc(5% + 70px); }
    .occh-jack-c { width: 44px; left: 8%; bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .occh-recdot { animation: none; }
    .occh-jack .occh-jack-face { animation: none; }
    .occh-hero.flick .occh-hero-in, .occh-hero.flick .occh-scanline { animation: none; }
    .occh-demo .occ-demo-env, .occh-demo-card { transition: none; }
}