:root {
  --dw-bg: #0b1a14; --dw-fg: #efe6cf; --dw-accent: #d4ad5a; --dw-muted: #9fb2a5; --dw-panel: rgba(11, 26, 20, .96);
  --dw-font-body: 'Cormorant Garamond', Georgia, serif; --dw-font-display: 'Limelight', Georgia, serif;
  --sans: 'Josefin Sans', system-ui, sans-serif; --emerald: #12392b; --wine: #7a1626; --line: #2c4a3c;
}
body { font-size: 1.22rem; line-height: 1.55; background: var(--dw-bg) repeating-linear-gradient(45deg, transparent 0 22px, #ffffff04 22px 23px); }
section { padding: clamp(56px, 9vw, 120px) clamp(16px, 4vw, 48px); }
h1, h2 { font-family: var(--dw-font-display); font-weight: 400; line-height: 1.08; margin: 0 0 .5em; }
h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); color: var(--dw-accent); }
h4 { font-family: var(--sans); }
.kicker, .label { font-family: var(--sans); font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: var(--dw-accent); margin: 0 0 1rem; }

.topbar { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px clamp(16px, 3vw, 32px); background: linear-gradient(#0b1a14f2, #0b1a1400); }
.brand { font-family: var(--dw-font-display); font-size: 1.5rem; color: var(--dw-accent); text-decoration: none; letter-spacing: .06em; }
.topbar nav { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); font-family: var(--sans); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
.topbar nav a { color: var(--dw-fg); text-decoration: none; opacity: .8; }
.topbar nav a:hover { opacity: 1; color: var(--dw-accent); }
@media (max-width: 560px) { .topbar nav a[href="#host"] { display: none; } }

.hero { position: relative; min-height: 100svh; display: grid; align-items: end; padding: 0; overflow: hidden; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(transparent 20%, #0b1a14d9 62%, #0b1a14 96%), radial-gradient(60% 50% at 50% 30%, transparent, #0b1a1488); }
.hero-copy { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; text-align: center; padding: 0 clamp(16px, 5vw, 64px) clamp(44px, 7vw, 90px); }
.hero h1 { font-size: clamp(2.3rem, 6vw, 4.4rem); text-shadow: 0 4px 30px #000; }
.hero h1 em { font-style: normal; color: var(--dw-accent); }
.lede { font-size: clamp(1.15rem, 1.9vw, 1.4rem); max-width: 640px; margin: 0 auto; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 1.6rem; }
.btn { display: inline-block; padding: .85em 1.5em .7em; border: 1px solid #d4ad5a88; color: var(--dw-fg); text-decoration: none; font-family: var(--sans); font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; }
.btn:hover { border-color: var(--dw-accent); color: var(--dw-accent); }
.btn-gold { background: var(--dw-accent); color: #14100a; border-color: var(--dw-accent); font-weight: 600; }
.btn-gold:hover { background: #e6c47a; color: #14100a; }
.hs-phone { position: absolute; z-index: 3; width: 120px; height: 46px; margin: -23px 0 0 -60px; border: 1px dashed transparent; border-radius: 10px; background: transparent; }
.hs-phone:hover, .hs-phone:focus-visible { border-color: var(--dw-accent); background: #d4ad5a1a; }

.how { max-width: 1100px; margin: 0 auto; text-align: center; }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; text-align: left; }
.steps li { counter-increment: s; position: relative; padding: 2.4rem 1.2rem 1.2rem; border: 1px solid var(--line); background: linear-gradient(#12392b66, transparent); font-size: 1.08rem; }
.steps li::before { content: counter(s, upper-roman); position: absolute; top: .7rem; left: 1.2rem; font-family: var(--dw-font-display); color: var(--dw-accent); font-size: 1.2rem; }
.steps b { display: block; font-family: var(--sans); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dw-fg); margin-bottom: .4em; }

/* case */
.case { background: linear-gradient(var(--dw-bg), #0e241b 30%, var(--dw-bg)); border-block: 1px solid var(--line); }
.case-head { max-width: 760px; margin: 0 auto 2.2rem; text-align: center; }
.case-grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 340px 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .case-grid { grid-template-columns: 1fr; } .phone-wrap { justify-self: center; } }
.phone-wrap { display: grid; gap: 12px; justify-items: center; }
.phone { width: 300px; max-width: 86vw; height: 590px; border-radius: 42px; background: #050807; padding: 14px; box-shadow: 0 0 0 2px #2b2b2b, 0 30px 80px #000c, 0 0 60px #d4ad5a1a; position: relative; }
.ph-notch { position: absolute; top: 14px; left: 50%; width: 90px; height: 22px; margin-left: -45px; border-radius: 0 0 14px 14px; background: #050807; z-index: 2; }
.ph-screen { height: 100%; border-radius: 30px; overflow-y: auto; background: radial-gradient(120% 60% at 50% 0%, #1a4434, #0b1a14 70%); padding: 40px 20px 20px; font-size: 1rem; line-height: 1.45; scrollbar-width: thin; scrollbar-color: #d4ad5a55 transparent; }
.ph-app { font-family: var(--sans); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dw-muted); text-align: center; margin: 0 0 1.4rem; }
.ph-big { font-family: var(--dw-font-display); font-size: 1.6rem; color: var(--dw-accent); text-align: center; margin-top: 4rem; }
.ph-small { text-align: center; opacity: .8; }
.ph-you { font-family: var(--sans); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; margin: 0; color: var(--dw-muted); }
.ph-name { font-family: var(--dw-font-display); font-size: 1.55rem; color: var(--dw-accent); margin: .1em 0 0; line-height: 1.1; }
.ph-role { font-style: italic; margin: .2em 0 .6em; opacity: .9; }
.ph-screen h4 { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dw-accent); margin: 1em 0 .2em; }
.ph-screen p, .ph-screen ul { margin: 0; }
.ph-screen ul { padding-left: 1.1em; }
.ph-secret { background: #7a162633; border-left: 3px solid var(--wine); padding: .3em .6em; }
.ph-wear { margin-top: 1em !important; font-size: .92rem; opacity: .85; }
.deal { font-family: var(--sans); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; padding: .9em 1.4em .75em; background: var(--wine); color: #fff; border: 1px solid #a3283a; cursor: pointer; }
.deal:hover, .deal:focus-visible { background: #93202f; }

.board { display: grid; gap: 16px; }
.suspects { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sus { border: 1px solid var(--line); background: #0e241b; padding: .7em .8em; font-size: .98rem; line-height: 1.3; }
.sus b { display: block; font-family: var(--sans); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dw-accent); margin-bottom: .2em; }
.sus.is-accused { border-color: var(--wine); background: #2a0f15; }
.rounds { display: flex; gap: 8px; flex-wrap: wrap; }
.rounds button, .accuse button { font-family: var(--sans); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; padding: .8em 1.2em .65em; border: 1px solid var(--dw-accent); background: transparent; color: var(--dw-accent); cursor: pointer; }
.rounds button:hover:not(:disabled), .rounds button:focus-visible { background: #d4ad5a22; }
.rounds button:disabled { opacity: .35; cursor: default; }
.rounds button.is-done { background: var(--dw-accent); color: #14100a; }
.clues { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.clue { border: 1px solid var(--line); border-left: 4px solid var(--dw-accent); background: #f1e7cd; color: #1d1a12; padding: .7em 1em; font-size: 1.05rem; }
.clue.is-new { animation: deal .55s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes deal { from { transform: translateX(30px) rotate(2deg); opacity: 0; } to { transform: none; opacity: 1; } }
.clue small { display: block; font-family: var(--sans); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--wine); margin-bottom: .2em; }
.accuse label { font-family: var(--sans); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dw-accent); }
.acc-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: .4em; }
.accuse select { flex: 1 1 220px; font: inherit; font-size: 1.05rem; padding: .5em .7em; background: #0e241b; color: var(--dw-fg); border: 1px solid var(--line); }
.accuse button { background: var(--wine); border-color: #a3283a; color: #fff; }
.verdict { border: 1px solid var(--dw-accent); background: #d4ad5a12; padding: 1em 1.2em; }
.verdict h3 { font-family: var(--dw-font-display); font-weight: 400; color: var(--dw-accent); margin: 0 0 .3em; font-size: 1.6rem; }
.verdict p { margin: .4em 0; }
.verdict button { font-family: var(--sans); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; background: none; border: 1px solid var(--line); color: var(--dw-fg); padding: .6em 1em .5em; cursor: pointer; margin-top: .4em; }

/* props */
.props { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.props .found, .props .reward, .props .journal { grid-column: 1 / -1; }
@media (max-width: 860px) { .props { grid-template-columns: 1fr; } }
.art { position: relative; margin: 0; overflow: hidden; box-shadow: 0 30px 90px #000c, 0 0 0 1px var(--dw-accent), 0 0 0 8px var(--dw-bg), 0 0 0 9px #d4ad5a66; }
.art img { width: 100%; height: auto; }
.hs { position: absolute; width: 10%; aspect-ratio: 1; border-radius: 50%; border: 1px dashed transparent; background: transparent; transform: translate(-50%, -50%); transition: border-color .3s, background .3s; }
.hs:hover, .hs:focus-visible { border-color: var(--dw-accent); background: #d4ad5a26; }
.hs.is-found { border-color: #ffffffaa; }
.hs-key { left: 24%; top: 56%; } .hs-watch { left: 32%; top: 48%; } .hs-bottle { left: 42.5%; top: 59%; } .hs-pearls { left: 58%; top: 79%; } .hs-glove { left: 94%; top: 68%; }
.found { font-family: var(--sans); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; text-align: center; opacity: .85; }
.reward { max-width: 680px; margin: 0 auto; padding: 1rem 1.3rem; border: 1px solid var(--dw-accent); background: #d4ad5a12; }
.journal { max-width: 780px; margin: 0 auto; font-size: 1.08rem; opacity: .92; }
.journal li { margin: .5em 0; }

.pricing { text-align: center; }
.pricing > p { max-width: 660px; margin: 0 auto; opacity: .88; }
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; max-width: 1040px; margin: 1.8rem auto 0; }
.offer { font-family: var(--dw-font-display); font-size: 2rem; color: var(--dw-accent); background: #0e241b; border: 1px solid var(--line); padding: 1em .8em; cursor: pointer; transition: border-color .2s, transform .2s; line-height: 1.1; }
.offer b { display: block; font-family: var(--sans); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dw-fg); margin-top: .5em; }
.offer small { display: block; font-family: var(--dw-font-body); font-size: 1rem; color: var(--dw-fg); opacity: .8; margin-top: .3em; }
.offer:hover, .offer:focus-visible { border-color: var(--dw-accent); transform: translateY(-2px); }
.offer-hot { border-color: #d4ad5a99; box-shadow: 0 0 0 1px #d4ad5a44 inset; }
.b2b { margin-top: 1.4rem; opacity: .9; }
.linkish { font: inherit; background: none; border: 0; color: var(--dw-accent); text-decoration: underline; cursor: pointer; padding: 0; }

.roster { display: grid; justify-items: center; text-align: center; background: radial-gradient(60% 80% at 50% 100%, #2a0f15, transparent); }
.roster > p { max-width: 580px; opacity: .9; }
.roster .dw-optin { text-align: left; width: 100%; }
.dw-optin button[type=submit] { font-family: var(--sans); letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; }
.offer-note { margin: 0; color: var(--dw-accent); font-family: var(--sans); font-size: .85rem; }

.foot { padding: 30px 16px 6px; text-align: center; border-top: 1px solid var(--line); }
.more { font-family: var(--sans); font-size: .85rem; letter-spacing: .04em; }
.glyph { background: none; border: 0; color: inherit; font-size: 1rem; cursor: pointer; opacity: .65; }
.glyph:hover, .glyph:focus-visible { opacity: 1; color: var(--dw-accent); }

@media (prefers-reduced-motion: reduce) { .clue.is-new { animation: none; } }
.props { row-gap: 1.2rem; }
.topbar nav a { white-space: nowrap; }
@media (max-width: 560px) { .topbar nav { font-size: .7rem; letter-spacing: .08em; } .brand { font-size: 1.25rem; } }

[hidden] { display: none !important; }