/* The World's Top Dentist pitch page. Follows Ahmed's WTD brand system (Visual Reference 04 to 06):
   Deep Black / Midnight Navy / White foundation, WTD Blue for numerals and labels, Champagne as ONE
   restrained highlight, logo strictly monochrome, HNN green only inside the HNN logo.
   Typography direction A (DM Serif Display + DM Sans). Direction B (Garet + Gill Sans) is a font swap. */
body.wtd {
  --paper: #F4F1EA; --paper-2: #E8E1D6; --ink: #080B0D; --ink-2: #4D535B; --rule: rgba(8, 11, 13, .16);
  --stage: #080B0D; --stage-2: #0E2A47; --on-stage: #FFFFFF; --on-stage-2: rgba(255, 255, 255, .68); --rule-stage: rgba(255, 255, 255, .16);
  --accent: #2E68FF; --champagne: #D4B483; --steel: #6B8FA7; --slate: #8A8F96;
  --f-sans: "DM Sans", "Helvetica Neue", Arial, sans-serif; --f-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  background: var(--stage);
}
body.wtd .hero-t, body.wtd .h1, body.wtd .h2, body.wtd .pull { font-family: var(--f-display); font-weight: 400; letter-spacing: -.012em; line-height: 1.02; }
body.wtd .hero-t { font-size: clamp(2.5rem, 5.4vw, 5.9rem); line-height: .98; }
body.wtd .h1 { font-size: clamp(2.3rem, 5.2vw, 5.6rem); }
body.wtd .h2 { font-size: clamp(1.8rem, 3.4vw, 3.5rem); line-height: 1.06; }
body.wtd .slug, body.wtd .status, body.wtd .mono { font-family: var(--f-sans); font-weight: 600; letter-spacing: .16em; font-size: .7rem; }
body.wtd .slug::before { background: var(--accent); }
body.wtd .champ { color: var(--champagne); }
body.wtd .navy { background: var(--stage-2); color: var(--on-stage); }
body.wtd .navy .muted { color: var(--on-stage-2); }
body.wtd .btn--blue { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (hover: hover) { body.wtd .btn--blue:hover { background: #fff; border-color: #fff; color: var(--ink); } }
body.wtd .brand img { height: 30px; }
body.wtd .hdr .nav .slug { color: inherit; opacity: .8; }

.wtd-hero { min-height: 100svh; display: grid; align-items: end; position: relative; overflow: hidden; background: radial-gradient(90% 70% at 78% 28%, #0E2A47 0%, rgba(14, 42, 71, .35) 38%, #080B0D 72%); color: #fff; }
.wtd-hero__bg { position: absolute; inset: 0; opacity: .34; }
.wtd-hero__bg video, .wtd-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.wtd-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #080B0D 8%, rgba(8, 11, 13, .55) 55%, rgba(8, 11, 13, .2)), linear-gradient(180deg, rgba(8, 11, 13, .5), rgba(8, 11, 13, 0) 30%, #080B0D 96%); }
.wtd-hero__in { position: relative; z-index: 2; width: 100%; padding: calc(var(--header-h) + 40px) var(--margin) clamp(30px, 5vh, 64px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 32px; align-items: end; }
.wtd-hero__txt { grid-column: 1 / span 8; display: grid; gap: clamp(14px, 2.1vh, 26px); }
.wtd-lock { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.wtd-lock img { height: 30px; width: auto; }
.wtd-lock i { width: 1px; height: 28px; background: var(--rule-stage); display: block; }
.wtd-mark { width: min(78%, 430px); height: auto; }
.wtd-hero__art { grid-column: 10 / span 3; justify-self: end; width: min(100%, 320px); aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .9); background: var(--stage-2); }
.wtd-hero__art img { width: 100%; height: 100%; object-fit: cover; }
.wtd-season { display: inline-flex; gap: 14px; align-items: center; flex-wrap: wrap; font-weight: 600; letter-spacing: .02em; }
.wtd-season b { color: var(--champagne); font-weight: 600; }
.wtd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule-stage); }
.wtd-stats div { padding: 20px var(--gutter) 22px 0; }
.wtd-stats b { display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(2.2rem, 4.4vw, 4.6rem); line-height: 1; color: var(--accent); }
.frame .wtd-stats, .frame-2 .wtd-stats { border-color: var(--rule); }
.wtd-stats span { display: block; margin-top: 10px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--on-stage-2); }
.frame .wtd-stats span, .frame-2 .wtd-stats span { color: var(--ink-2); }
@media (max-width: 860px) { .wtd-hero__txt { grid-column: 1 / -1; } .wtd-hero__art { grid-column: 1 / span 6; justify-self: start; order: -1; width: 52vw; max-width: 240px; } .wtd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cmds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule-stage); border: 1px solid var(--rule-stage); margin-top: clamp(32px, 5vw, 72px); }
.cmds article { background: var(--stage); padding: clamp(22px, 2.6vw, 40px); display: grid; gap: 16px; align-content: start; }
.cmds .n { font-family: var(--f-display); font-size: clamp(2rem, 3.4vw, 3.4rem); color: var(--accent); line-height: 1; }
.cmds h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.12; }
@media (max-width: 860px) { .cmds { grid-template-columns: 1fr; } }

.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); margin-top: clamp(32px, 5vw, 72px); }
.path { border: 1px solid var(--rule); border-radius: 6px; padding: clamp(24px, 3vw, 48px); display: grid; gap: 18px; align-content: start; background: #fff; }
.path .h2 { font-size: clamp(1.7rem, 3vw, 3rem); }
.path .k { color: var(--accent); }
@media (max-width: 860px) { .paths { grid-template-columns: 1fr; } }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule-stage); border: 1px solid var(--rule-stage); margin-top: clamp(32px, 5vw, 72px); }
.tiles > * { background: var(--stage); padding: clamp(20px, 2.2vw, 34px); display: grid; gap: 12px; align-content: start; min-height: 11.5em; }
.navy .tiles > * { background: var(--stage-2); }
.frame .tiles, .frame-2 .tiles { background: var(--rule); border-color: var(--rule); }
.frame .tiles > * { background: var(--paper); } .frame-2 .tiles > * { background: var(--paper-2); }
.tiles .n { font-weight: 600; font-size: .78rem; letter-spacing: .16em; color: var(--accent); }
.tiles h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.25rem, 1.7vw, 1.7rem); line-height: 1.15; }
.tiles p { font-size: .96rem; line-height: 1.45; color: var(--on-stage-2); }
.frame .tiles p, .frame-2 .tiles p { color: var(--ink-2); }
@media (max-width: 1023px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .tiles { grid-template-columns: 1fr; } .tiles > * { min-height: 0; } }

.devices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(24px, 3vw, 44px); }
.devices span { font-weight: 600; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; padding: .8em 1.05em .72em; border: 1px solid var(--rule-stage); border-radius: 2px; line-height: 1; }
.devices span.soon { opacity: .55; border-style: dashed; }
.bigquote { font-family: var(--f-display); font-size: clamp(1.7rem, 3.6vw, 3.8rem); line-height: 1.08; max-width: 24ch; text-wrap: balance; }
.checks { display: grid; gap: 12px; margin-top: 20px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: baseline; font-size: 1.06rem; }
.checks li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); transform: translateY(-1px); }
.bodies { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.bodies span { font-family: var(--f-display); font-size: clamp(1.2rem, 1.8vw, 1.8rem); padding: .42em .8em; border: 1px solid var(--rule-stage); border-radius: 2px; }
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); margin-top: clamp(32px, 5vw, 72px); }
.steps li { border-top: 2px solid var(--ink); padding-top: 18px; display: grid; gap: 12px; align-content: start; }
.steps .n { font-family: var(--f-display); font-size: clamp(2rem, 3.2vw, 3.2rem); color: var(--accent); line-height: 1; }
.steps h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.3rem, 1.8vw, 1.8rem); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.faq { border-top: 1px solid var(--rule); margin-top: clamp(28px, 4vw, 56px); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: 20px; align-items: center; padding-block: 22px; font-family: var(--f-display); font-size: clamp(1.2rem, 1.9vw, 1.9rem); line-height: 1.15; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-sans); font-weight: 400; font-size: 1.7rem; line-height: 1; justify-self: end; color: var(--accent); transition: transform .35s var(--ease-expressive); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 48px 26px 0; max-width: 70ch; color: var(--ink-2); }
.apply { text-align: center; display: grid; justify-items: center; gap: clamp(20px, 3vw, 36px); }
.apply .hero-t { max-width: 15ch; }
.wtd-ftr { background: var(--stage); color: var(--on-stage-2); padding: clamp(40px, 5vw, 72px) var(--margin) 28px; border-top: 1px solid var(--rule-stage); display: grid; gap: 22px; }
.wtd-ftr__top { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: end; color: var(--on-stage); padding-left: 0; }
.wtd-ftr small { font-size: .74rem; line-height: 1.55; max-width: 110ch; display: block; padding-left: 78px; }

/* ================= WYNX pitch page theme (matches the Sept 17 invitation deck: warm paper, serif, copper rule) ================= */
body.wynx {
  --paper: #F7F3EB; --paper-2: #EEE8DC; --ink: #15130F; --ink-2: #5A554B; --rule: rgba(21, 19, 15, .17);
  --stage: #12100D; --stage-2: #1D1913; --on-stage: #F7F3EB; --on-stage-2: rgba(247, 243, 235, .68); --rule-stage: rgba(247, 243, 235, .17);
  --accent: #C2622B; --champagne: #C2622B;
  --f-sans: "DM Sans", "Helvetica Neue", Arial, sans-serif; --f-display: "Spectral", Georgia, "Times New Roman", serif;
}
body.wynx .hero-t, body.wynx .h1, body.wynx .h2, body.wynx .pull { font-family: var(--f-display); font-weight: 400; letter-spacing: -.018em; line-height: 1.04; }
body.wynx .hero-t { font-size: clamp(2.3rem, 4.9vw, 5.3rem); line-height: 1.04; }
body.wynx .h1 { font-size: clamp(2.2rem, 4.8vw, 5rem); }
body.wynx .h2 { font-size: clamp(1.7rem, 3.2vw, 3.2rem); line-height: 1.08; }
body.wynx .slug, body.wynx .status, body.wynx .mono { font-family: var(--f-sans); font-weight: 600; letter-spacing: .16em; font-size: .7rem; }
body.wynx .slug::before { background: var(--accent); }
body.wynx .champ { color: var(--accent); }
body.wynx .btn--blue { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (hover: hover) { body.wynx .btn--blue:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); } body.wynx .stage .btn--blue:hover { background: var(--on-stage); border-color: var(--on-stage); color: var(--stage); } }
body.wynx .tiles h3, body.wynx .steps h3, body.wynx .cmds h3, body.wynx .bigquote, body.wynx .faq summary, body.wynx .wtd-stats b { font-family: var(--f-display); }
body.wynx .brand-txt { font-family: var(--f-display); font-weight: 500; letter-spacing: .18em; font-size: 1.25rem; }
.wynx-hero { min-height: 100svh; display: grid; align-items: end; background: var(--paper); color: var(--ink); position: relative; }
.wynx-hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--accent); }
.wynx-hero .wtd-hero__in { padding-top: calc(var(--header-h) + 48px); }
.wynx-hero .wtd-lock img { height: 32px; }
.wynx-hero .wtd-lock i { background: var(--rule); }
.wynx-hero .wtd-hero__art { box-shadow: 0 40px 80px -34px rgba(21, 19, 15, .55); width: min(100%, 360px); grid-column: 9 / span 4; }
.wynx-hero .wtd-hero__txt { grid-column: 1 / span 7; }
.credits { display: grid; gap: 6px; font-weight: 600; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); border-top: 1px solid var(--accent); padding-top: 16px; max-width: 60ch; }
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: clamp(32px, 5vw, 72px); }
.people article { border-top: 2px solid var(--accent); padding-top: 18px; display: grid; gap: 10px; align-content: start; }
.people h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.4rem, 2.1vw, 2.1rem); line-height: 1.1; }
@media (max-width: 860px) { .people { grid-template-columns: 1fr; } .wynx-hero .wtd-hero__txt, .wynx-hero .wtd-hero__art { grid-column: 1 / -1; } }

.tiles--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tiles--5 > * { min-height: 10em; }
@media (max-width: 1100px) { .tiles--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================= THE NEW WOO pitch page theme (from the trilogy one-sheets: black, gold light, classical roman type) ================= */
body.woo {
  --paper: #F5F1E8; --paper-2: #ECE5D6; --ink: #0E0C09; --ink-2: #5B5546; --rule: rgba(14, 12, 9, .17);
  --stage: #0B0906; --stage-2: #17120A; --on-stage: #F5F1E8; --on-stage-2: rgba(245, 241, 232, .68); --rule-stage: rgba(201, 162, 75, .28);
  --accent: #C9A24B; --champagne: #C9A24B;
  --f-sans: "DM Sans", "Helvetica Neue", Arial, sans-serif; --f-display: "Marcellus", "Times New Roman", serif;
  background: var(--stage);
}
body.woo .hero-t, body.woo .h1, body.woo .h2, body.woo .pull { font-family: var(--f-display); font-weight: 400; letter-spacing: -.005em; line-height: 1.06; }
body.woo .hero-t { font-size: clamp(2.6rem, 6.4vw, 7rem); line-height: 1; }
body.woo .h1 { font-size: clamp(2.2rem, 4.8vw, 5.1rem); }
body.woo .h2 { font-size: clamp(1.7rem, 3.1vw, 3.1rem); }
body.woo .slug, body.woo .status, body.woo .mono { font-family: var(--f-sans); font-weight: 600; letter-spacing: .18em; font-size: .7rem; }
body.woo .slug::before { background: var(--accent); }
body.woo .champ { color: var(--accent); }
body.woo .btn--blue { background: var(--accent); border-color: var(--accent); color: #0B0906; }
@media (hover: hover) { body.woo .btn--blue:hover { background: var(--on-stage); border-color: var(--on-stage); color: var(--stage); } body.woo .frame .btn--blue:hover, body.woo .frame-2 .btn--blue:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); } }
body.woo .tiles h3, body.woo .steps h3, body.woo .bigquote, body.woo .wtd-stats b, body.woo .people h3 { font-family: var(--f-display); }
body.woo .brand-txt { font-family: var(--f-display); font-weight: 400; letter-spacing: .2em; font-size: 1.15rem; text-transform: uppercase; }
.woo-hero { min-height: 100svh; display: grid; align-items: end; position: relative; overflow: hidden; color: var(--on-stage); background: radial-gradient(70% 60% at 50% 38%, rgba(201, 162, 75, .30) 0%, rgba(201, 162, 75, .07) 42%, rgba(11, 9, 6, 0) 70%), var(--stage); }
.woo-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 26px); grid-column: 7 / span 6; align-self: end; }
.woo-trio > div { aspect-ratio: 2 / 3; border-radius: 3px; overflow: hidden; box-shadow: 0 40px 80px -30px #000; background: var(--stage-2); }
.woo-trio > div:nth-child(2) { transform: translateY(-9%); }
.woo-trio img { width: 100%; height: 100%; object-fit: cover; }
.woo-hero .wtd-hero__txt { grid-column: 1 / span 6; }
body.woo .woo-hero .hero-t { font-size: clamp(2.5rem, 5.4vw, 5.8rem); }
.pillars { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.pillars span { font-family: var(--f-display); font-size: clamp(1.05rem, 1.5vw, 1.5rem); padding: .5em .9em; border: 1px solid var(--rule-stage); border-radius: 2px; }
.frame .pillars span, .frame-2 .pillars span { border-color: var(--rule); }
.offer { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 28px; align-items: end; }
.offer__head { grid-column: 1 / span 8; }
.offer__price { grid-column: 9 / span 4; justify-self: end; text-align: right; }
.offer__price b { display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(3rem, 7vw, 7.4rem); line-height: .95; color: var(--accent); }
.offer__price span { font-weight: 600; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--on-stage-2); }
.bullets { columns: 2 280px; column-gap: var(--gutter); margin-top: 22px; }
.bullets li { break-inside: avoid; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--rule); position: relative; }
.stage .bullets li { border-color: var(--rule-stage); }
.bullets li::before { content: ""; position: absolute; left: 0; top: 1.25em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
@media (max-width: 860px) { .woo-trio, .woo-hero .wtd-hero__txt, .offer__head, .offer__price { grid-column: 1 / -1; justify-self: start; text-align: left; } .woo-trio { order: -1; max-width: 420px; } }