/* ==========================================================================
   Header fixes (all pages)
   ========================================================================== */

:root {
	--orka-navy: #0b1220;
	--orka-card: #131d31;
	--orka-ink: #e6eaf0;
	--orka-muted: #8b96a8;
	--orka-cyan: #1eb4f0;
	--orka-link: #19b3ef;
	--orka-link-hover: #7ad4f7;
	--orka-code: #05080b;
	--orka-text-muted: rgb(from var(--orka-white) r g b / .72);
	--orka-text-soft: rgb(from var(--orka-white) r g b / .86);
	--orka-text-faint: rgb(from var(--orka-white) r g b / .35);
	--orka-line: rgb(from var(--orka-white) r g b / .08);
	--orka-line-strong: rgb(from var(--orka-white) r g b / .12);
	--orka-rule: rgb(from var(--orka-white) r g b / .16);
	--orka-glow: rgb(from var(--orka-secondary) r g b / .14);
	--orka-glow-soft: rgb(from var(--orka-secondary) r g b / .08);
	--orka-pill: rgb(from var(--orka-secondary) r g b / .3);
	--orka-pill-hover: rgb(from var(--orka-secondary) r g b / .5);
	--orka-footer: rgb(from var(--orka-white) r g b / .82);
	--orka-shadow: rgb(from var(--orka-black) r g b / .2);
	--orka-accent-hover: #c9661c;
	--live: #ef4b4b;
  --family-display:Montserrat,ui-sans-serif,system-ui,sans-serif;
  --family-body:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --family-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  padding: 120px 1rem 0 1rem;
  background: var(--orka-navy);
  color:var(--orka-text-soft);
  font-family:var(--family-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
  background-image:
		radial-gradient(900px 500px at 85% 0%, var(--orka-glow), transparent 60%),
		radial-gradient(700px 500px at 0% 100%, var(--orka-glow-soft), transparent 60%);
}

@media (min-width: 400px) {
  body {
    padding: 120px 2rem 0 2rem;
  }
}

/* 3.5.8 (Ken 10/21): the header's logo, Contact Us and phone-menu pills no longer draw a dark
   box (Tailwind bg-black/30 or bg-black/10 plus backdrop-blur, from header-content.php) when not
   hovered, so they sit on whatever background the page has. Hover (the blue pill) is unchanged;
   keyboard focus gets a visible ring.
   The inner pages (Creators 934, Broadcasters 953 and /ads 969 in their page CSS, /advertise/ 712
   in inc/marketplace.css) re-add the same rgba(0,0,0,.3) with !important, so this rule doubles
   the id and uses !important to win everywhere without editing those pages. */
#nav-container a.rounded-full.backdrop-blur:not(:hover),
#nav-container .menu-toggle.backdrop-blur:not(:hover) {
	background-color: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}
/* Home: the logo pill is solid --orka-secondary. The header fade (::before)
   paints over in-flow children, which washed this pill down to the inactive blue.
   Every other page matches .nav-menu>li a: rgba(0,160,223,.3), blur 8px,
   and .5 on hover. */
body.home #nav-container .basis-1\/2:first-child > a.rounded-full,
body.home #nav-container .basis-1\/2:first-child > a.rounded-full:hover {
	position: relative;
	z-index: 1;
	background-color: var(--orka-secondary) !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}
body:not(.home) #nav-container .basis-1\/2:first-child > a.rounded-full {
	/*background-color: var(--orka-pill) !important;*/
	background-color: rgb(from black r g b / 0.5) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	backdrop-filter: blur(8px) !important;
}
body:not(.home) #nav-container .basis-1\/2:first-child > a.rounded-full:hover {
	background-color: var(--orka-pill-hover) !important;
}
#nav-container .menu-toggle:hover {
	background-color: var(--orka-pill-hover);
}
#nav-container a.rounded-full.backdrop-blur:focus-visible,
#nav-container .menu-toggle:focus-visible,
#nav-container label:focus-within .menu-toggle {
	outline: 2px solid var(--orka-secondary);
	outline-offset: 2px;
}
/* 3.6.2 (Ken 10/21): the header Contact Us button is gone (header-content.php). It used to give
   the right-hand header cell its height; the phone-menu button is absolutely positioned inside
   its label, so the label now gets the button's own size (2.75rem tall, py-3 + h-5 icon) and the
   button stays in the same spot, vertically centred with the logo. */
#nav-container label[for="mobile-menu"],
#nav-container .mobile-menu { height: 2.75rem; } /* a flex item, so height applies; lg:hidden still hides it */
#nav-container button.menu-toggle {
	border: 0;
	color: inherit;
	font: inherit;
	line-height: 0;
	cursor: pointer;
}
#mobile-navigation.is-open { transform: translateX(0); }

/* 3.6.2 (Ken 10/21): the header OrkaTV logo is 33% larger (wordmark 16px -> 21.3px tall on
   desktop, 14.4px -> 19.2px under 1024px where the root font is 90%). The pill around it
   (transparent until hovered, blue on hover, blue focus ring from 3.5.8) scales with it:
   44px -> 58.5px tall and 1.33x padding. On phones (<768px) the pill keeps its 44px height so its
   hover box still clears the first LIVE tag below the header; only the wordmark and the side
   padding grow there.
   3.6.5 (Ken 10/21, "make all the same size ... the size of the logo on the home page"): this
   was body.home only; it now applies on every page (Creators, Broadcasters, /ads, /advertise/,
   posts...). The doubled id outranks any page-content CSS (body.page-id-NNN #nav-container...). */
#nav-container .basis-1\/2:first-child > a.rounded-full {
	height: 58.5px;
	padding: 1.0666rem 1.6666rem 0;   /* was pt-3 px-5 (.75rem / 1.25rem) */
}
#nav-container .basis-1\/2:first-child > a.rounded-full > img {
	height: 1.3333rem;                /* was h-4 (1rem) */
	width: auto;
	top: 1.33px;
}
@media (max-width: 767px) {
	#nav-container .basis-1\/2:first-child > a.rounded-full {
		height: 44px;
		padding-top: calc((44px - 1.3333rem) / 2 - 1px);
	}
}
#nav-container nav[aria-label="Mobile Navigation"] li.is-sub > a { padding-left: 2.25rem; font-size: .925em; }

#colophon {
  padding: 3em 0;

  a:not(:has(img)) {
    color: var(--orka-secondary);

    &:hover {
      text-decoration: underline;
    }
  }

  .nav-footer {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1em;

    > li {
      flex: auto;
    }
  }
}

@media (min-width: 400px) {
  #colophon .text-right {
    display: flex;
    justify-content: end;
  }
}

#colophon .current-menu-item {
  text-decoration: underline;
}

#watch-now-nudge {
  display: none;
}
@media (min-width: 1024px) {
  #watch-now-nudge.is-visible {
    display: inline-flex;
  }
}

/* ==========================================================================
   Shared page shell (every page, same as the home page)
   ========================================================================== */
/* Palette. --orka-primary, --orka-secondary, --orka-accent, --orka-white,
   and --orka-black are defined in style.css. These extend that set. */
.nav-pill { background-color: rgb(from var(--orka-black) r g b / .3); }
.nav-drawer { background-color: rgb(from var(--orka-secondary) r g b / .6); }
#mobile-navigation menu > li {
	background-color: rgb(from var(--orka-white) r g b / .1);
	color: var(--orka-white);
}
#mobile-navigation menu > li.is-current {
	background-color: var(--orka-white);
	color: var(--orka-secondary);
}
/* Navy field, the two home-page glows, header fade, and footer bar. Page CSS
   should not repeat this. */
/*body,
body .layout {
	background-color: var(--orka-navy);
	color: var(--orka-white);
	font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
}*/
/*body .layout {
	background-image:
		radial-gradient(900px 500px at 85% 0%, var(--orka-glow), transparent 60%),
		radial-gradient(700px 500px at 0% 100%, var(--orka-glow-soft), transparent 60%);
}*/
body #dots-container { display: none; }
.layout.snap,
.layout.snap #slides { scroll-snap-type: none !important; }
footer.general > div { background: var(--orka-card); }
footer.general > svg { color: var(--orka-card); }
#nav-container.spotlights:before,
#nav-container.general:before { height: 12vh; background: linear-gradient(var(--orka-navy), rgb(from var(--orka-navy) r g b / 0)); }
#nav-container .nav-menu > li > a { color: var(--orka-white); }

/* Document scroll, footer in flow at the end, on every page.
   Every page uses the same frame from src/partials/page.html:
   .layout > main.site-main > .site-page > .container. */
/*body { overflow-x: hidden !important; overflow-y: visible !important; height: auto !important; }*/
/*body > .layout { height: auto !important; min-height: calc(100dvh - 44px) !important; overflow: visible !important; }*/
/*body > .layout:before { display: none; }*/
/*body > .layout > .site-main { overflow: visible !important; height: auto !important; flex: 1 0 auto !important; min-width: 0; }*/
/*footer#colophon { position: relative !important; bottom: auto !important; left: auto; right: auto; margin-top: 0; }*/
/*html { scroll-padding-top: 104px; }*/

.v3-home {
	--v3-blue: #00a0df;
	--v3-blue-hi: #19b3ef;
	--v3-blue-lo: #008cc4;
	--v3-live: #ef4444;
	--v3-text: #fff;
	--v3-muted: rgba(255, 255, 255, .72);
	--v3-header: 96px;
	/* 3.6.3: Creators navy + its two glows (top right, bottom left), was #000 */
	color: var(--v3-text);
	font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}
.v3-home *, .v3-home *::before, .v3-home *::after { box-sizing: border-box; }
.v3-home a { color: inherit; }

/* ---------- 3.6.1 / 3.6.6 homepage video (self-hosted, native controls) ---------- */
.v3-video { padding: 8px 0 32px; }
.v3-video .v3-h2 { margin-bottom: 1.5rem; }
.v3-video__frame {
	max-width: 1100px; margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden;
	border-radius: 20px; background: #05080b; border: 1px solid rgba(0, 160, 223, .25);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.v3-video__el { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.v3-video__el:focus-visible { outline: 2px solid #00a0df; outline-offset: -2px; }
@media (max-width: 640px) {
	.v3-video { padding: 0 0 24px; }
	.v3-video__frame { border-radius: 14px; }
}

/* ---------- 3.6.6 Creators video (moved from the homepage; markup from functions.php 4c-2) ----------
   Sits between the Creators hero and the "Early access invitations are limited." pill.
   Matches the Creators page: #0b1220 background, cyan #1eb4f0 accents, 16px radius like the form card. */
.v3-cvideo { position: relative; padding: 0 0 64px; }
.v3-cvideo__wrap { box-sizing: border-box; width: 100%; max-width: 1104px; margin: 0 auto; padding: 0 32px; }
.v3-cvideo__frame {
	position: relative; aspect-ratio: 16 / 9; overflow: hidden;
	border-radius: 16px; background: #05080b; border: 1px solid rgba(30, 180, 240, .3);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 0 6px rgba(30, 180, 240, .06);
}
.v3-cvideo__el { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.v3-cvideo__el:focus-visible { outline: 2px solid #1eb4f0; outline-offset: -2px; }
@media (max-width: 767px) {
	.v3-cvideo { padding: 0 0 48px; }
	.v3-cvideo__wrap { padding: 0 20px; }
	.v3-cvideo__frame { border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
}

/* ---------- Hero ---------- */
.v3-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	align-items: center;
	min-height: 70vh;
	padding: var(--v3-header) 0 40px;
}
.v3-hero__copy {
	position: relative;
	z-index: 2;
	/*padding: 24px 24px 24px max(32px, calc((100vw - 1240px) / 2 + 32px));*/
}
@supports (container-type: inline-size) {
	.v3-hero { container-type: inline-size; }
}
h1.v3-title {
	margin: 0 0 1.25rem;
	font-family: var(--family-display);
	font-weight: 800;
	font-size: clamp(2.6rem, 5.2vw, 5rem);
	line-height: 1.02;
	letter-spacing: -.035em;
	color: var(--orka-white);
	text-align: left;
	text-wrap: balance;
}
.v3-title .v3-live { color: var(--v3-blue); }
.v3-sub { margin: 0 0 2rem; font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.55; color: var(--v3-muted); }
.v3-cta {
	display: inline-flex; align-items: center; gap: .65rem;
	height: 56px; padding: 0 28px; border-radius: 9999px;
	background: #fff; color: #000 !important; text-decoration: none;
	font-weight: 800; font-size: 1.05rem;
	box-shadow: 0 10px 30px rgba(0, 160, 223, .25);
	transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.v3-cta svg { width: 18px; height: 18px; }
.v3-cta:hover { background: var(--v3-blue); color: #fff !important; transform: translateY(-1px); box-shadow: 0 14px 36px rgba(0, 160, 223, .4); }
.v3-cta:focus-visible, .v3-home a:focus-visible { outline: 3px solid var(--v3-blue-hi); outline-offset: 3px; }

/* Wall of TV-screen tiles — v3.5.2: back to the first v3 (3.0/3.1) look: soft colour
   gradient placeholder screens, 3 angled columns, a few red LIVE tags (Ken 10/21). */
.v3-wall {
	position: relative;
	z-index: 1;
	align-self: stretch;
	height: calc(100dvh - 140px - var(--v3-header) - 40px);
	min-height: 440px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(to right, transparent 0, #000 14%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(to right, transparent 0, #000 14%);
	mask-composite: intersect;
}
.v3-wall__inner {
	position: absolute; inset: -12% -6% -12% 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
	transform: rotate(-6deg);
}
.v3-col { display: flex; flex-direction: column; gap: 14px; animation: v3-up 80s linear infinite; will-change: transform; }
.v3-col:nth-child(2) { animation-name: v3-down; animation-duration: 95s; margin-top: -90px; }
.v3-col:nth-child(3) { animation-duration: 70s; margin-top: -40px; }
@keyframes v3-up { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
@keyframes v3-down { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } }

.v3-tile {
	position: relative; margin: 0; flex: none;
	aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
	background: #111;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.v3-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v3-tile.is-ph {
	background:
		radial-gradient(90% 70% at 22% 18%, hsla(var(--h), 95%, 66%, .55), transparent 62%),
		radial-gradient(70% 60% at 85% 90%, hsla(calc(var(--h) + 50), 90%, 55%, .35), transparent 60%),
		linear-gradient(135deg, hsl(var(--h), 62%, 24%), hsl(calc(var(--h) + 35), 70%, 9%));
}
.v3-tile.is-ph::after {
	content: ""; position: absolute; inset: 0;
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px),
		radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .45));
}
.v3-tile .v3-badge {
	position: absolute; left: 10px; top: 10px; z-index: 1;
	padding: 3px 8px; border-radius: 6px; background: var(--v3-live); color: #fff;
	font-size: .6rem; font-weight: 800; letter-spacing: .1em;
}

/* Phone strip (replaces the wall under 768px) */
.v3-strip { display: none; }

/* ---------- Ken's copy ---------- */
.v3-copy { padding: 48px 0 64px; background: linear-gradient(#000, #05080b 120px); border-top: 1px solid rgba(255, 255, 255, .08); }
.v3-copy__body { max-width: 46rem; margin: 0 auto; }
.v3-copy__body p { margin: 0 0 1.35rem; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.65; color: rgba(255, 255, 255, .82); }
.v3-copy__body p:first-child { font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1.5; color: #fff; }
.v3-copy__body strong { color: #fff; font-weight: 800; }
.v3-copy__body p:last-child { margin-bottom: 0; }

/* ---------- Download block ---------- */
.v3-dl { padding: 0 0 72px; background: transparent; /* 3.6.3: was #000 */ text-align: center; } /* 3.6.0: the .v3-copy block above was removed, so no top padding and no gradient (it joins the channels section directly) */
.v3-dl__card {
	max-width: 920px; margin: 0 auto; padding: 40px 32px;
	border-radius: 24px; background: rgba(0, 160, 223, .1); border: 1px solid rgba(0, 160, 223, .25);
}
.v3-dl h2 { margin: 0 0 .5rem; font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.02em; color: #fff; }
.v3-dl__lede { margin: 0 0 1.75rem; color: var(--v3-muted); }
.v3-dl__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 36px; margin: 0; padding: 0; list-style: none; }
.v3-dl__logos a, .v3-dl__soon span { display: inline-flex; align-items: center; color: #fff; transition: color .15s ease; }
.v3-dl__logos a:hover { color: var(--v3-blue-hi); }
.v3-dl__logos svg, .v3-dl__soon svg { height: 100%; width: auto; }
.v3-h-roku { height: 22px; } .v3-h-firetv { height: 40px; } .v3-h-androidtv { height: 24px; } .v3-h-googleplay { height: 46px; } .v3-h-lg { height: 36px; } .v3-h-samsung { height: 28px; }
.v3-dl__soon-label { margin: 2rem 0 .75rem; font-size: .85rem; color: rgba(255, 255, 255, .55); }
.v3-dl__soon { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; padding: 12px 24px; border-radius: 14px; border: 2px solid rgba(0, 160, 223, .15); }
.v3-dl__soon span { color: rgba(255, 255, 255, .7); }
.v3-h-vizio { height: 12px; } .v3-h-appletv { height: 20px; }

/* ==========================================================================
   v3.4: value props, top channels, FAQ (structure loosely after philo.com/go/welcome;
   kept monochrome: white/grey on black, brand blue only for focus and hover)
   ========================================================================== */
.v3-h2 { margin: 0 0 .6rem; text-align: center; font-weight: 800; font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.1; letter-spacing: -.025em; color: #fff; text-wrap: balance; }
.v3-lede { max-width: 36rem; margin: 0 auto 2.5rem; text-align: center; font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.55; color: var(--v3-muted); text-wrap: balance; }

/* ---------- Value props ---------- */
.v3-props { padding: 8px 0 56px; }
.v3-props__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.v3-prop { padding: 32px 28px; text-align: center; }
.v3-prop + .v3-prop { border-left: 1px solid rgba(255, 255, 255, .1); }
.v3-prop svg { width: 30px; height: 30px; margin: 0 auto 14px; display: block; color: rgba(255, 255, 255, .85); }
.v3-prop h3 { margin: 0 0 .4rem; font-size: 1.15rem; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.v3-prop p { margin: 0 auto; max-width: 18rem; font-size: .95rem; line-height: 1.5; color: rgba(255, 255, 255, .62); }

/* ---------- Top channels ---------- */
.v3-channels { padding: 40px 0 72px; }
.v3-ch__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 1100px; margin: 0 auto; padding: 0; list-style: none; }
.v3-ch {
	flex: 0 0 calc((100% - 5 * 14px) / 6);
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 16 / 9; border-radius: 14px;
	background: #0b0c0e; border: 1px solid rgba(255, 255, 255, .07);
	transition: border-color .2s ease, background .2s ease;
}
.v3-ch img { display: block; width: var(--w, 50%); max-width: 76%; max-height: 70%; height: auto; object-fit: contain; filter: grayscale(1); opacity: .72; transition: opacity .2s ease; }
.v3-ch:hover { border-color: rgba(255, 255, 255, .18); background: #101215; }
.v3-ch:hover img { opacity: 1; }
.v3-ch.is-text span { padding: 0 10px; text-align: center; font-size: .8rem; font-weight: 700; line-height: 1.25; color: rgba(255, 255, 255, .72); }
.v3-ghost {
	display: inline-flex; align-items: center; gap: .5rem;
	height: 46px; padding: 0 22px; border-radius: 9999px;
	border: 1px solid rgba(255, 255, 255, .25); color: #fff !important; text-decoration: none;
	font-weight: 700; font-size: .95rem; transition: border-color .15s ease, color .15s ease;
}
.v3-ghost svg { width: 16px; height: 16px; }
.v3-ghost:hover { border-color: var(--v3-blue); color: var(--v3-blue-hi) !important; }

/* ---------- FAQ ---------- */
.v3-faq { padding: 24px 0 24px; }
.v3-faq .v3-h2 { margin-bottom: 2rem; }
.v3-faq__list { max-width: 46rem; margin: 0 auto; border-top: 1px solid rgba(255, 255, 255, .12); }
.v3-faq__item { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.v3-faq__item summary {
	position: relative; display: block; cursor: pointer; list-style: none;
	padding: 22px 48px 22px 4px; font-size: clamp(1rem, 1.3vw, 1.15rem); font-weight: 700; color: #fff;
}
.v3-faq__item summary::-webkit-details-marker { display: none; }
.v3-faq__item summary::after {
	content: ""; position: absolute; right: 10px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
	border-right: 2px solid rgba(255, 255, 255, .7); border-bottom: 2px solid rgba(255, 255, 255, .7);
	transform: rotate(45deg); transition: transform .2s ease;
}
.v3-faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.v3-faq__item summary:hover { color: var(--v3-blue-hi); }
.v3-faq__item summary:focus-visible { outline: 3px solid var(--v3-blue-hi); outline-offset: 2px; }
.v3-faq__item p { margin: 0; padding: 0 48px 22px 4px; font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, .7); }
.v3-faq__cta { margin: 2.5rem 0 0; text-align: center; }

@media (max-width: 1023px) {
	.v3-ch { flex-basis: calc((100% - 3 * 12px) / 4); }
	.v3-ch__grid { gap: 12px; }
}
@media (max-width: 767px) {
	.v3-props { padding: 0 0 40px; }
	.v3-props__list { grid-template-columns: 1fr; }
	.v3-prop { display: grid; grid-template-columns: 30px 1fr; column-gap: 16px; padding: 20px 4px; text-align: left; }
	.v3-prop + .v3-prop { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
	.v3-prop svg { grid-row: span 2; margin: 2px 0 0; width: 26px; height: 26px; }
	.v3-prop p { max-width: none; margin: 0; }
	.v3-channels { padding: 32px 0 56px; }
	.v3-ch__grid { gap: 10px; }
	.v3-ch { flex-basis: calc((100% - 2 * 10px) / 3); border-radius: 10px; }
	.v3-lede { margin-bottom: 1.75rem; }
	.v3-faq__item summary { padding: 18px 40px 18px 2px; }
	.v3-faq__item p { padding: 0 8px 18px 2px; }
	.v3-faq__cta .v3-cta { width: 100%; justify-content: center; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
	.v3-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
	/*.v3-hero__copy { padding-left: 32px; }*/
	.v3-wall__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); inset: -12% -10% -12% 0; }
	.v3-col:nth-child(3) { display: none; }
}
@media (max-width: 767px) {
	.v3-home .v3-wrap { padding: 0 20px; }
	.v3-hero { display: block; min-height: 0; padding: calc(var(--v3-header) - 8px) 0 40px; }
	.v3-wall { display: none; }
	.v3-strip {
		display: grid; gap: 10px; margin: 0 0 28px; overflow: hidden;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
		mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
	}
	.v3-row { display: flex; gap: 10px; width: max-content; animation: v3-left 60s linear infinite; }
	.v3-row + .v3-row { animation-name: v3-right; animation-duration: 70s; }
	.v3-row .v3-tile { width: 168px; border-radius: 10px; }
	@keyframes v3-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
	@keyframes v3-right { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
	/*.v3-hero__copy { padding: 0 20px; text-align: left; }*/
	h1.v3-title { font-size: clamp(2.4rem, 11vw, 3.2rem); }
	.v3-cta { width: 100%; justify-content: center; }
	.v3-copy { padding: 36px 0 48px; }
	.v3-dl { padding-bottom: 72px; }
	.v3-dl__card { padding: 28px 18px; border-radius: 18px; }
	.v3-dl__logos { gap: 16px 26px; }
	.v3-h-roku { height: 17px; } .v3-h-firetv { height: 30px; } .v3-h-androidtv { height: 18px; } .v3-h-googleplay { height: 36px; } .v3-h-lg { height: 28px; } .v3-h-samsung { height: 22px; }
}
/* v3.5.3: placeholder label across the tile wall (Ken 10/21) so the team knows this
   visual is a stand-in and must be made by a human. Decorative only: no clicks. */
.v3-human {
	position: absolute; inset: 0; z-index: 3;
	display: flex; align-items: center; justify-content: center;
	pointer-events: none;
}
.v3-human span {
	display: block; width: 116%; padding: 18px 24px;
	transform: rotate(-6deg);
	background: rgba(0, 0, 0, .72);
	border-top: 2px solid rgba(255, 255, 255, .85); border-bottom: 2px solid rgba(255, 255, 255, .85);
	color: #fff; text-align: center;
	font-weight: 800; font-size: clamp(1.6rem, 3.2vw, 3rem); line-height: 1.1; letter-spacing: -.01em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
	text-wrap: balance;
}
@media (max-width: 767px) {
	.v3-strip { position: relative; }
	.v3-human span { width: 110%; padding: 10px 16px; font-size: clamp(1.1rem, 5.6vw, 1.5rem); }
}

/* v3.5.6: hero background = Ken's three-panel image (podcast / basketball / concert), 10/21.
   Anchored right + cover so the headline sits on the image's dark left side. The tile wall
   rules above stay for the alternative in template-parts/alt/hero-tilewall.php. */
.v3-hero__bg {
	position: absolute; inset: 0 0 0 20%; z-index: 0;
	pointer-events: none;
	background: transparent; /* 3.6.3: was #000; the image fades into the page's navy */
	overflow: hidden;
	container-type: size; /* 3.5.7: the image frame and LIVE tags are sized from this box */
}
/* 3.5.7: the hero is one centred unit with the header row. --v3-gut is the header's own side
   margin (its Tailwind container: 1024 / 1280 / 1536px wide, at least 32px): the headline starts
   exactly under the logo, and the image ends 32px past the Contact Us edge, so where the gutter is
   32px (1024, 1280, 1536...) the image still runs to the screen edge as before, and on wide screens
   it no longer sticks to the viewport's right edge. */
@property --v3-rf { syntax: '<length>'; inherits: true; initial-value: 0px; }
@supports (container-type: inline-size) {
	.v3-hero { --v3-cw: 100cqw; }
	.v3-hero__bg {
		--v3-gut: max(32px, (100cqw - var(--v3-cw)) / 2);
		left: calc(var(--v3-gut) - 32px + (100cqw - 2 * var(--v3-gut) + 64px) * .2);
		right: -2rem;
		/*right: calc(var(--v3-gut) - 32px);
		--v3-rf: min(90px, var(--v3-gut) - 32px);*/ /* right-edge fade only where black follows */
	}
	/*@media (min-width: 768px) {
		.v3-hero__copy { padding-left: max(32px, (100cqw - var(--v3-cw)) / 2); }
	}*/
}
@media (min-width: 1024px) { .v3-hero { --v3-cw: 1024px; } }
@media (min-width: 1280px) { .v3-hero { --v3-cw: 1280px; } }
@media (min-width: 1536px) { .v3-hero { --v3-cw: 1536px; } }
.v3-hero__media { position: absolute; inset: 0; }
/* Fades live on the image frame (not on .v3-hero__bg) so they never fade the LIVE tags: the image's
   own dark left side fades out before the first panel, a soft top/bottom edge, and a right-edge
   fade only when there is black beyond it (wide screens). */
.v3-hero__media .v3-hero__frame {
	-webkit-mask-image: linear-gradient(to right, transparent 26%, #000 36%), linear-gradient(to bottom, transparent 0, #000 7%, #000 85%, transparent 100%), linear-gradient(to left, transparent 0, #000 var(--v3-rf));
	-webkit-mask-composite: source-in, source-in;
	mask-image: linear-gradient(to right, transparent 26%, #000 36%), linear-gradient(to bottom, transparent 0, #000 7%, #000 85%, transparent 100%), linear-gradient(to left, transparent 0, #000 var(--v3-rf));
	mask-composite: intersect;
}
/* Fallback (no container queries): plain cover image, no tags. */
.v3-hero__frame { position: absolute; inset: 0; --v3-ox: 1; }
.v3-hero__frame picture, .v3-hero__frame img { display: block; width: 100%; height: 100%; }
.v3-hero__frame img { object-fit: cover; object-position: right center; }
.v3-hero__tags { display: none; }
@supports (container-type: size) {
	/* 3.5.7: a box with the image's exact 1672:941 shape that covers .v3-hero__bg the same way
	   object-fit: cover did (anchored right, centred vertically). Tags are placed in % of this box,
	   so they stay on their panel whatever the screen size. */
	.v3-hero__frame {
		inset: auto;
		/* cover, but capped at 1.2x the box width on desktop (tall windows): at least 83% of the
		   image width stays visible, so all three panels are always whole and the podcaster's face
		   stays clear of the headline; any spare height fades to black above and below. */
		--v3-fw: min(max(100cqw, 100cqh * 1.776833), 100cqw * var(--v3-cap, 1.2));
		--v3-fh: calc(var(--v3-fw) * .562799);
		width: var(--v3-fw); height: var(--v3-fh);
		left: calc((100cqw - var(--v3-fw)) * var(--v3-ox));
		/* 3.5.8: 20px lower on desktop so the top of the panels clears the header row (room for the
		   LIVE tags above the heads); the extra 20px at the bottom falls in the fade to black. */
		--v3-ft: calc((100cqh - var(--v3-fh)) * .5 + var(--v3-oy, 20px));
		top: var(--v3-ft);
	}
	.v3-hero__tags { display: block; z-index: 1; }
}
.v3-hero__bg::after {
	content: ""; position: absolute; inset: 0;
	background:
		/* 3.6.3: the same shading in the page navy instead of black, so the fade lands on #0b1220 */
		linear-gradient(90deg, rgba(11, 18, 32, .55) 0, rgba(11, 18, 32, .2) 30%, rgba(11, 18, 32, 0) 45%),
		linear-gradient(to bottom, rgba(11, 18, 32, .35) 0, rgba(11, 18, 32, 0) 22%, rgba(11, 18, 32, 0) 78%, #0b1220 100%);
}

/* 3.5.7: red LIVE tags (Ken 10/21). Decorative only. Positions are image coordinates
   (x / 1672, y / 941), picked so each tag stays inside its own panel, clear of the slanted
   dividers, the faces/hair, the header (logo, Creators/Broadcasters/Advertisers, Contact Us)
   and the hero copy. 3.5.8: top-left of each panel everywhere (Ken's sample); on desktop
   just below the header row. */
.v3-live-tag {
	position: absolute;
	/* 3.5.8: --x/--y are fractions of the image (top-left of each panel at y = 6%). On desktop a tag
	   is never closer than 80px to the top of the hero (just below the header row, whose nav pill
	   and Contact Us end at 74px); when it has to move down it also moves left along the slanted
	   divider (slope 0.115), so it stays just inside its panel. */
	/* 3.6.4 (Ken 10/21): every tag sits --v3-tag-drop lower than in 3.5.8 (all breakpoints), for
	   more breathing room under the nav pill / logo; it still slides left along the divider. */
	--t: calc(max(calc(var(--v3-fh) * var(--y)), calc(80px - var(--v3-ft))) + var(--v3-tag-drop, 10px));
	top: var(--t);
	left: calc(var(--v3-fw) * var(--x) - (var(--t) - var(--v3-fh) * var(--y)) * .115);
	display: inline-flex; align-items: center; gap: .5em;
	height: 2em; padding: 0 .85em 0 .75em; border-radius: .5em;
	background: #e3262f; color: #fff;
	/* scales with the image (about 15px of the 1672px-wide source), 10-13px */
	font: 800 clamp(10px, var(--v3-fw) * .00897, 13px)/1 Montserrat, ui-sans-serif, system-ui, sans-serif;
	letter-spacing: .06em;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
	pointer-events: none; user-select: none;
}
.v3-live-tag::before { content: ""; flex: none; width: .55em; height: .55em; border-radius: 50%; background: #fff; }
.v3-live-tag { --y: .06; }
.v3-live-tag--1 { --x: .38098; } /* 3.5.8: top-left of each panel, like Ken's sample: podcaster (637, 56) */
.v3-live-tag--2 { --x: .60287; } /* basketball (1008, 56) */
.v3-live-tag--3 { --x: .82955; } /* singer (1387, 56) */
/* Very short desktop windows (hero under ~520px tall): the header covers the top of the
   panels and there is no clear spot left, so the tags are hidden rather than collide. */
@media (min-width: 768px) and (max-height: 659px) and (orientation: landscape) {
	.v3-live-tag { display: none; }
}

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
	/* Tablet portrait: the hero is taller than the image, so show it whole (no face crop). */
	.v3-hero__bg {
		inset: 50% 0 auto 14%; transform: translateY(-50%);
		aspect-ratio: 1672 / 941;
	}
	.v3-hero__frame { --v3-cap: 99; --v3-oy: 0px; }
}
@media (max-width: 767px) {
	/* Phone: the image sits above the copy (where the tile strip was), cropped to the three
	   panels, fading into black so the headline stays on solid dark. */
	.v3-hero__bg {
		position: relative; inset: auto;
		aspect-ratio: 1.15 / 1;
		margin: -28px -2rem -36px;
	}
	.v3-hero__frame { --v3-cap: 99; --v3-oy: 0px; } /* 3.5.7: anchored right (was 82%) so the singer is whole too */
	.v3-hero__bg::after {
		background: linear-gradient(to bottom, rgba(11, 18, 32, .35) 0, rgba(11, 18, 32, 0) 22%, rgba(11, 18, 32, 0) 58%, #0b1220 100%); /* 3.6.3: navy, was black */
	}
}
@media (max-width: 767px), (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
	/* Phone / tablet portrait: top-left of each panel (the header is clear of the image here). */
	/* 3.6.4: the same --v3-tag-drop as desktop, sliding left along the divider (slope .115) */
	.v3-live-tag { font-size: 10px; --y: .03826; top: calc(var(--v3-fh) * var(--y) + var(--v3-tag-drop, 10px)); left: calc(var(--v3-fw) * var(--x) - var(--v3-tag-drop, 10px) * .115); }
	.v3-live-tag--1 { --x: .38278; } /* (640, 36) */
	.v3-live-tag--2 { --x: .60706; } /* (1015, 36) */
	.v3-live-tag--3 { --x: .82835; } /* (1385, 36) */
}
/* 3.6.4: in short desktop windows (up to 740px tall) the tags sit at the 80px floor right above
   the heads, so the image moves down the same 10px as the tags (--v3-oy 20px -> 30px; the extra
   falls in the bottom fade) and the heads keep their clearance. Taller windows: image unchanged. */
@media (min-width: 768px) and (orientation: landscape) and (max-height: 740px) {
	.v3-hero__frame { --v3-oy: 30px; }
}
/* 3.6.4: phones get 8px rather than 10px: the image is only ~1/3 scale there, and 10px would put
   the tags onto the podcaster's and singer's hair at 360px. 8px still doubles the gap to the logo. */
@media (max-width: 767px) {
	.v3-live-tag { --v3-tag-drop: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.v3-col, .v3-row { animation: none !important; }
}


/* ==========================================================================
   v3.6 footer (Ken 10/21): about a third of the old height
   Desktop: one 44px row (the old footer was 130px, in two rows). Phones: hidden, as before.
   Inner pages now scroll the whole document from 768px up, as the homepage
   already does, so the footer sits at the end of the page instead of staying
   pinned over the content.
   ========================================================================== */
footer#colophon.v3-foot { position: relative !important; left: auto; right: auto; bottom: auto !important; height: auto !important; margin: 0; z-index: 40; filter: drop-shadow(0 0 30px var(--orka-shadow)); }
footer#colophon.v3-foot > div.v3-foot__bar { display: none; }
@media (min-width: 768px) {
	footer#colophon.v3-foot > div.v3-foot__bar {
		display: flex; align-items: center; justify-content: space-between; gap: 24px;
		height: 44px; padding: 0 max(32px, calc((100% - 1472px) / 2)); box-sizing: border-box;
		font-size: 12.5px; line-height: 1; color: var(--orka-footer); white-space: nowrap;
	}
	.v3-foot__legal, .v3-foot__right, .v3-foot__badges { display: flex; align-items: center; }
	.v3-foot__legal { gap: 8px; min-width: 0; }
	.v3-foot__sep { opacity: .45; }
	.v3-foot__logo { display: inline-flex; align-items: center; }
	.v3-foot__logo img { height: 11px; width: auto; display: block; }
	.v3-foot__privacy, .v3-foot__privacy:visited { color: var(--orka-secondary); }
	.v3-foot__privacy:hover { text-decoration: underline; }
	.v3-foot__right { gap: 14px; }
	.v3-foot__badges { gap: 6px; }
	.v3-foot__badges a { display: inline-flex; align-items: center; height: 28px; }
	.v3-foot__badges img { height: 18px; width: auto; display: block; }
	.v3-foot__badges .v3-foot__li img { height: 16px; width: 16px; }
	footer#colophon.v3-foot ul.v3-foot__links { display: inline-flex; flex-wrap: nowrap; margin: 0; padding: 0; list-style: none; border-radius: 9999px; overflow: hidden; font-size: 12.5px; }
	footer#colophon.v3-foot ul.v3-foot__links > li > a.btn {
		display: inline-flex; align-items: center; height: 28px; min-height: 0; padding: 0 14px; font-size: 12.5px; line-height: 1; border-radius: 0;
	}
	footer#colophon.v3-foot ul.v3-foot__links > li:first-child > a.btn { padding-left: 16px; }
	footer#colophon.v3-foot ul.v3-foot__links > li:last-child > a.btn { padding-right: 16px; }
	footer#colophon.v3-foot ul.v3-foot__links > li > a.btn:hover { background-color: var(--orka-pill-hover); }
	footer#colophon.v3-foot a:focus-visible { outline: 2px solid var(--orka-secondary); outline-offset: 2px; }
}
/* 3.6.8: a third footer link (Streaming Specs). From 768px to 899px the row was about 46px too wide:
   the logo got squeezed and the legal line ran under the badges. Tighten that range only. */
@media (min-width: 768px) and (max-width: 899px) {
	footer#colophon.v3-foot > div.v3-foot__bar { gap: 12px; padding: 0 24px; font-size: 12px; }
	.v3-foot__legal { gap: 6px; }
	.v3-foot__logo, .v3-foot__logo img { flex-shrink: 0; }
	.v3-foot__right { gap: 10px; }
	.v3-foot__badges { gap: 4px; }
	footer#colophon.v3-foot ul.v3-foot__links, footer#colophon.v3-foot ul.v3-foot__links > li > a.btn { font-size: 12px; }
	footer#colophon.v3-foot ul.v3-foot__links > li > a.btn { padding: 0 9px; }
	footer#colophon.v3-foot ul.v3-foot__links > li:first-child > a.btn { padding-left: 11px; }
	footer#colophon.v3-foot ul.v3-foot__links > li:last-child > a.btn { padding-right: 11px; }
}
/* 3.7.3: a fourth footer link (Take-down request). The 3.6.8 tight spacing now covers 768-1023px
   (at 900-1023 the logo was being squeezed), and from 768 to 899px the row no longer fits on one line,
   so the bar wraps to two centred rows there (legal line, then badges + links). 1024px up is unchanged. */
@media (min-width: 900px) and (max-width: 1023px) {
	footer#colophon.v3-foot > div.v3-foot__bar { gap: 12px; padding: 0 24px; font-size: 12px; }
	.v3-foot__legal { gap: 6px; }
	.v3-foot__logo, .v3-foot__logo img { flex-shrink: 0; }
	.v3-foot__right { gap: 10px; }
	.v3-foot__badges { gap: 4px; }
	footer#colophon.v3-foot ul.v3-foot__links, footer#colophon.v3-foot ul.v3-foot__links > li > a.btn { font-size: 12px; }
	footer#colophon.v3-foot ul.v3-foot__links > li > a.btn { padding: 0 9px; }
	footer#colophon.v3-foot ul.v3-foot__links > li:first-child > a.btn { padding-left: 11px; }
	footer#colophon.v3-foot ul.v3-foot__links > li:last-child > a.btn { padding-right: 11px; }
}
@media (min-width: 768px) and (max-width: 899px) {
	footer#colophon.v3-foot > div.v3-foot__bar { flex-wrap: wrap; justify-content: center; height: auto; min-height: 44px; padding: 8px 24px; row-gap: 6px; }
}

.block-content { font-size: 1.0625rem; line-height: 1.7; color: var(--orka-text-soft); }
.block-content p,
.block-content ul,
.block-content ol,
.block-content blockquote,
.block-content figure,
.block-content pre { margin: 0 0 1rem; }
.block-content h2,
.block-content h3,
.block-content h4 { color: var(--orka-white); font-weight: 700; line-height: 1.25; }
.block-content h2 { font-size: 1.5rem; margin: 2rem 0 0.75rem; }
.block-content h3 { font-size: 1.2rem; margin: 1.5rem 0 0.5rem; }
.block-content h4 { font-size: 1.05rem; margin: 1.25rem 0 0.5rem; }
.block-content a { color: var(--orka-link); }
.block-content a:hover { color: var(--orka-link-hover); }
.block-content ul,
.block-content ol { padding-left: 1.25rem; }
.block-content li { margin: 0.35rem 0; }
.block-content blockquote { border-left: 3px solid var(--orka-link); padding-left: 1rem; color: var(--orka-text-soft); }
.block-content img { max-width: 100%; height: auto; }
.block-content hr { border: 0; border-top: 1px solid var(--orka-rule); margin: 2rem 0; }
.block-content pre,
.block-content code { font-family: var(--family-mono); }
.block-content pre { overflow: auto; padding: 1rem; background: var(--orka-code); border: 1px solid var(--orka-line-strong); border-radius: 0.5rem; font-size: 0.85rem; }
.block-content table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
.block-content th,
.block-content td { border-bottom: 1px solid var(--orka-line-strong); padding: 0.5rem 0.75rem; text-align: left; }
.block-content b { font-weight: bold; }
.block-content strong { font-weight: bold; }