/* Calm premium MVP polish layer. Loaded last. */
:root {
/* One tab-to-tab gap for the whole header, both sides. */
--yv-tab-gap: 0.75rem;
/* The logo gets a little extra breathing room beyond the regular
tab-to-tab gap, applied equally on both sides so it stays symmetric. */
--yv-logo-gap: calc(var(--yv-tab-gap) + 0.4rem);
--ink-900: #173c31;
--ink-800: #235244;
--ink-700: #326a56;
--cream: #fbfaf5;
--sand: #edf6ee;
--paper: #ffffff;
--sage: #72a982;
--sage-dk: #2f6f52;
--gold: #bf9141;
--coral: #d58b74;
--violet: #6f7f9f;
--sky: #9dd8cf;
--text: #1c332b;
--text-soft: #586e64;
--text-inv: #f8fff9;
--text-inv-soft: #d9e9de;
--radius: 16px;
--radius-sm: 10px;
--shadow: 0 22px 60px -34px rgba(23, 60, 49, 0.34);
--shadow-sm: 0 12px 34px -24px rgba(23, 60, 49, 0.26);
--ring: 0 0 0 3px rgba(114, 169, 130, 0.28);
--grad-power: linear-gradient(145deg, #fbfaf5 0%, #eff7f0 56%, #f8fbf7 100%);
--grad-accent: linear-gradient(135deg, #2f6f52 0%, #74aa81 72%, #bf9141 100%);
}

body {
background: var(--cream);
color: var(--text);
}

.site-top,
.site-topgroup {
display: flex;
flex-direction: column;
overflow: visible;
background: rgba(251, 250, 245, 0.94);
backdrop-filter: blur(14px);
}

h1,
h2,
h3,
.nav__name,
.fs-topnav__brand span {
letter-spacing: 0;
}

.yv-logo-img {
box-shadow: 0 12px 28px -20px rgba(23, 60, 49, 0.6);
}

.btn {
border-radius: 999px;
box-shadow: none;
}

.btn--primary {
background: #2f6f52;
color: #fff;
box-shadow: 0 18px 34px -22px rgba(47, 111, 82, 0.75);
}

.btn--primary:hover {
background: #285f47;
}

.btn--ghost {
background: rgba(255, 255, 255, 0.78);
border-color: rgba(47, 111, 82, 0.24);
color: #285f47;
}

.btn--ghost:hover {
background: #fff;
border-color: rgba(47, 111, 82, 0.38);
}

.topbar {
position: relative;
order: -1;
z-index: 1;
width: fit-content;
max-width: min(720px, calc(100% - 2rem));
min-height: 22px;
margin: 0.28rem auto 0.16rem;
padding: 0.22rem 0.72rem;
border-radius: 999px;
font-size: 0.72rem;
line-height: 1.12;
background: rgba(36, 79, 65, 0.94);
animation: none;
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 12px 28px -22px rgba(23, 60, 49, 0.45);
}

.topbar::before,
.topbar::after,
.topbar__avatars {
display: none;
}

.topbar__globe,
.topbar__arrow {
animation: none;
filter: none;
}

.topbar__globe {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--sky);
box-shadow: 0 0 0 5px rgba(157, 216, 207, 0.16);
}

@media (min-width: 781px) {
.nav,
.fs-topnav {
position: relative;
z-index: 3;
flex-wrap: wrap;
padding-block: 0.68rem 0.78rem;
}

.nav__links,
.fs-topnav__links {
flex: 1 0 100%;
flex-basis: 100%;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 0.32rem;
min-width: 0;
overflow: visible;
padding-top: 0.58rem;
border-top: 1px solid rgba(47, 111, 82, 0.1);
}
}

.nav,
.fs-topnav {
background: rgba(255, 255, 255, 0.92);
border-bottom: 1px solid rgba(47, 111, 82, 0.12);
box-shadow: 0 18px 40px -34px rgba(23, 60, 49, 0.32);
}

.nav__brand,
.fs-topnav__brand {
flex: 0 0 auto;
font-size: 1.32rem;
}

.nav__brand .yv-logo-img {
width: 48px;
height: 48px;
border-radius: 14px;
}

.nav__name-accent {
background: none;
color: var(--sage-dk);
}

.nav__link,
.fs-topnav__links a,
.nav-drop__tab {
border: 1px solid transparent;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
line-height: 1;
padding: 0.48rem 0.68rem;
color: #526b5e;
white-space: nowrap;
}

.nav__link:hover,
.fs-topnav__links a:hover,
.nav-drop__tab:hover {
background: rgba(114, 169, 130, 0.12);
color: var(--ink-900);
}

.nav__link.is-active,
.fs-topnav__links a.is-cta,
.nav-drop__tab.is-cta {
background: rgba(47, 111, 82, 0.1);
border-color: rgba(47, 111, 82, 0.18);
color: var(--sage-dk);
}

.nav__link.is-active::after {
display: none;
}

.nav__link--quiet {
opacity: 0.78;
}

/* Modern tab treatment with a calm zoom-in entrance. */
.nav__link,
.fs-topnav__links a,
.nav-drop__tab {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
isolation: isolate;
overflow: hidden;
min-height: 33px;
border-color: rgba(47, 111, 82, 0.14);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(248, 252, 248, 0.58));
box-shadow:
0 10px 24px -22px rgba(23, 60, 49, 0.48),
inset 0 1px 0 rgba(255, 255, 255, 0.86);
transform-origin: 50% 50%;
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
background 0.22s ease,
border-color 0.22s ease,
color 0.22s ease;
}

.nav__link:hover,
.fs-topnav__links a:hover,
.nav-drop__tab:hover {
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(238, 249, 240, 0.86) 58%, rgba(252, 248, 239, 0.9));
border-color: rgba(47, 111, 82, 0.32);
box-shadow:
0 18px 34px -24px rgba(23, 60, 49, 0.48),
0 0 0 4px rgba(114, 169, 130, 0.08);
transform: translateY(-1px);
}

.nav__link:focus-visible,
.fs-topnav__links a:focus-visible,
.nav-drop__tab:focus-visible {
outline: none;
box-shadow: var(--ring), 0 18px 34px -24px rgba(23, 60, 49, 0.48);
}

.nav__link.is-active,
.fs-topnav__links a.is-cta,
.nav-drop__tab.is-cta {
background:
linear-gradient(135deg, #2f6f52, #6ca77b 68%, #bf9141);
border-color: rgba(47, 111, 82, 0.34);
color: #fff;
box-shadow:
0 18px 36px -22px rgba(47, 111, 82, 0.66),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.nav__link.is-active::after,
.fs-topnav__links a.is-cta::after,
.nav-drop__tab.is-cta::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: 4px;
display: block;
height: 2px;
border-radius: 99px;
background: rgba(255, 255, 255, 0.52);
}

.yv-tab-entrance {
opacity: 0;
transform: perspective(700px) translateY(-8px) translateZ(-80px) scale(0.78);
will-change: transform, opacity, filter;
}

.yv-tab-entrance.is-tab-seen {
opacity: 1;
filter: none;
transform: none;
animation: yv-tab-zoom 640ms cubic-bezier(0.18, 0.84, 0.22, 1) backwards;
animation-delay: var(--tab-delay, 90ms);
}

.nav__link.yv-tab-entrance.is-tab-seen:hover,
.fs-topnav__links a.yv-tab-entrance.is-tab-seen:hover,
.nav-drop__tab.yv-tab-entrance.is-tab-seen:hover {
transform: translateY(-1px);
}

.yv-tab-entrance.is-tab-rested {
animation: none;
will-change: auto;
}

@keyframes yv-tab-zoom {
0% {
opacity: 0;
filter: blur(8px);
transform: perspective(700px) translateY(-10px) translateZ(-120px) scale(0.68);
}
68% {
opacity: 1;
filter: blur(0);
transform: perspective(700px) translateY(1px) translateZ(0) scale(1.06);
}
100% {
opacity: 1;
filter: blur(0);
transform: perspective(700px) translateY(0) translateZ(0) scale(1);
}
}

@media (min-width: 781px) {
.nav::after,
.fs-topnav::after {
content: "";
position: absolute;
left: clamp(1rem, 4vw, 2.5rem);
right: clamp(1rem, 4vw, 2.5rem);
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(114, 169, 130, 0.44), rgba(191, 145, 65, 0.28), transparent);
}

.nav__links,
.fs-topnav__links {
position: relative;
padding: 0.66rem;
border: 1px solid rgba(47, 111, 82, 0.12);
border-radius: 22px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(239, 248, 241, 0.68) 62%, rgba(253, 249, 240, 0.66));
box-shadow:
0 20px 54px -42px rgba(23, 60, 49, 0.42),
inset 0 1px 0 rgba(255, 255, 255, 0.88);
}
}

.nav-drop {
position: relative;
display: inline-flex;
align-items: center;
}

.nav-drop::after {
content: "";
position: absolute;
left: -0.35rem;
right: -0.35rem;
top: 100%;
height: 0.82rem;
z-index: 899;
}

.nav-drop__caret {
margin-left: 0.28rem;
font-size: 0.68rem;
line-height: 1;
opacity: 0.72;
transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-drop__panel {
position: absolute;
top: calc(100% + 0.24rem);
left: 50%;
z-index: 900;
display: grid;
gap: 0.18rem;
min-width: 210px;
max-width: min(280px, calc(100vw - 2rem));
margin: 0;
padding: 0.5rem;
list-style: none;
border: 1px solid rgba(47, 111, 82, 0.14);
border-radius: 14px;
background:
linear-gradient(180deg, #ffffff, #f8fcf9);
box-shadow: 0 24px 60px -32px rgba(23, 60, 49, 0.44);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(-50%, -6px) scale(0.98);
transform-origin: top center;
transition:
opacity 0.18s ease,
visibility 0.18s ease,
transform 0.18s ease;
}

.nav-drop__panel.is-closing {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}

.nav-drop__panel::before {
content: "";
position: absolute;
left: 14px;
right: 14px;
top: 0;
height: 3px;
border-radius: 0 0 99px 99px;
background: linear-gradient(90deg, var(--sage), var(--gold));
}

.nav-drop:hover .nav-drop__panel,
.nav-drop:focus-within .nav-drop__panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0) scale(1);
}

.nav-drop:hover .nav-drop__caret,
.nav-drop:focus-within .nav-drop__caret {
opacity: 1;
transform: translateY(1px);
}

.nav-drop__panel li {
min-width: 0;
}

.fs-topnav__links .nav-drop__panel a {
display: flex;
justify-content: flex-start;
width: 100%;
min-height: 34px;
padding: 0.58rem 0.68rem;
border: 0;
border-radius: 10px;
background: transparent;
box-shadow: none;
color: #355d4c;
font-size: 0.78rem;
font-weight: 700;
line-height: 1.22;
text-align: left;
white-space: normal;
}

.fs-topnav__links .nav-drop__panel a:hover,
.fs-topnav__links .nav-drop__panel a:focus-visible {
background: rgba(114, 169, 130, 0.13);
color: var(--ink-900);
transform: none;
box-shadow: none;
}

:is(section, main, h1, h2, h3, .yi-eye, .section__eyebrow, .ct-hero__eyebrow, .ct-aside__eyebrow, .fs-hero__eyebrow, .pr-hero__eyebrow, .md-hero__eyebrow)[id] {
scroll-margin-top: calc(var(--site-top-h, 150px) + 18px);
}

@media (min-width: 781px) {
.fs-topnav__links > .nav-drop:nth-last-child(-n+4) .nav-drop__panel {
left: auto;
right: 0;
transform: translate(0, -6px) scale(0.98);
transform-origin: top right;
}

.fs-topnav__links > .nav-drop:nth-last-child(-n+4):hover .nav-drop__panel,
.fs-topnav__links > .nav-drop:nth-last-child(-n+4):focus-within .nav-drop__panel {
transform: translate(0, 0) scale(1);
}

.yv-nav-side--right > .nav-drop:nth-last-child(-n+3) .nav-drop__panel {
left: auto;
right: 0;
transform: translate(0, -6px) scale(0.98);
transform-origin: top right;
}

.yv-nav-side--right > .nav-drop:nth-last-child(-n+3):hover .nav-drop__panel,
.yv-nav-side--right > .nav-drop:nth-last-child(-n+3):focus-within .nav-drop__panel {
transform: translate(0, 0) scale(1);
}
}

@media (max-width: 780px) {
.nav-drop {
display: block;
width: 100%;
}

.nav-drop::after {
display: none;
}

.nav-drop__tab {
width: 100%;
}

.nav-drop__panel {
position: static;
display: none;
min-width: 0;
max-width: none;
margin: 0.24rem 0 0.34rem;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
box-shadow: none;
background: rgba(247, 251, 247, 0.86);
}

.nav-drop:hover .nav-drop__panel,
.nav-drop:focus-within .nav-drop__panel {
display: grid;
transform: none;
}
}

/* ---------- Split navigation experiment: top tabs + left rail ---------- */
.yv-primary-tabs {
align-items: center;
row-gap: 0.42rem;
}

.nav__links.yv-primary-tabs .nav__link,
.fs-topnav__links.yv-primary-tabs > a,
.fs-topnav__links.yv-primary-tabs .yv-nav-side > a,
.yv-primary-tabs .nav-drop__tab {
min-height: 34px;
max-width: 188px;
white-space: normal;
line-height: 1.12;
text-align: center;
}

.nav__links.yv-primary-tabs .nav-drop__panel a,
.fs-topnav__links.yv-primary-tabs .nav-drop__panel a {
max-width: none;
white-space: normal;
text-align: left;
}

.yv-leftnav {
position: fixed;
left: clamp(0.7rem, 1.4vw, 1.1rem);
top: calc(var(--site-top-h, 132px) + 0.85rem);
z-index: 44;
width: 212px;
max-height: calc(100vh - var(--site-top-h, 132px) - 1.7rem);
padding: 0.72rem;
overflow: visible;
border: 1px solid rgba(47, 111, 82, 0.16);
border-radius: 18px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 251, 247, 0.88));
box-shadow:
0 24px 54px -38px rgba(23, 60, 49, 0.46),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
backdrop-filter: blur(18px);
}

@media (min-width: 901px) {
body.yv-has-leftnav {
--yv-leftnav-space: 242px;
}

body.yv-has-leftnav > section,
body.yv-has-leftnav > main:not(#main),
body.yv-has-leftnav > footer,
body.yv-has-leftnav > main#main > section {
padding-left: max(var(--yv-leftnav-space), clamp(1rem, 4vw, 2.5rem));
}
}

.yv-leftnav__label {
margin: 0 0 0.48rem;
padding: 0 0.38rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.16em;
line-height: 1;
text-transform: uppercase;
color: rgba(47, 111, 82, 0.76);
}

.yv-leftnav__list {
display: grid;
gap: 0.24rem;
max-height: none;
overflow: visible;
padding-right: 0.14rem;
scrollbar-width: thin;
}

.yv-leftnav .nav-drop {
display: block;
width: 100%;
}

.yv-leftnav .nav-drop::after {
left: 100%;
right: auto;
top: -0.2rem;
bottom: -0.2rem;
width: 0.9rem;
height: auto;
}

.yv-leftnav__link {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
width: 100%;
min-height: 34px;
padding: 0.52rem 0.62rem;
border: 1px solid transparent;
border-radius: 12px;
color: #496858;
font-size: 0.76rem;
font-weight: 700;
line-height: 1.2;
background: rgba(255, 255, 255, 0.54);
transition:
background 0.18s ease,
border-color 0.18s ease,
color 0.18s ease,
transform 0.18s ease,
box-shadow 0.18s ease;
}

.yv-leftnav__link:hover,
.yv-leftnav__link:focus-visible {
background: rgba(238, 249, 240, 0.94);
border-color: rgba(47, 111, 82, 0.22);
color: var(--ink-900);
box-shadow: 0 14px 28px -24px rgba(23, 60, 49, 0.5);
transform: translateX(2px);
outline: none;
}

.yv-leftnav__link.is-current {
background: linear-gradient(135deg, #2f6f52, #6ca77b 70%, #bf9141);
border-color: rgba(47, 111, 82, 0.26);
color: #fff;
box-shadow: 0 16px 34px -24px rgba(47, 111, 82, 0.68);
}

.yv-leftnav .nav-drop__caret {
margin-left: auto;
font-size: 0.62rem;
opacity: 0.72;
}

.yv-leftnav .nav-drop__panel,
.yv-leftnav .nav-drop__panel[role="menu"],
.yv-leftnav [role="menu"].nav-drop__panel {
top: 0;
left: calc(100% + 0.62rem);
right: auto;
z-index: 90;
min-width: 218px;
background: linear-gradient(180deg, #ffffff, #f8fcf9);
box-shadow: 0 24px 54px -28px rgba(23, 60, 49, 0.44);
transform: translate(-8px, 0) scale(0.98) !important;
transform-origin: left top;
}

.yv-leftnav .nav-drop:hover .nav-drop__panel,
.yv-leftnav .nav-drop:focus-within .nav-drop__panel {
transform: translate(0, 0) scale(1) !important;
}

@media (max-width: 900px) {
.yv-leftnav .nav-drop::after {
display: none;
}

.yv-leftnav {
position: sticky;
top: var(--site-top-h, 132px);
left: 0;
width: 100%;
max-height: none;
padding: 0.58rem clamp(1rem, 4vw, 2.5rem);
border-width: 0 0 1px;
border-radius: 0;
overflow: hidden;
box-shadow: 0 12px 28px -28px rgba(23, 60, 49, 0.4);
}

.yv-leftnav__label {
margin-bottom: 0.36rem;
}

.yv-leftnav__list {
display: flex;
gap: 0.36rem;
max-height: none;
overflow-x: auto;
overflow-y: visible;
padding: 0 0 0.16rem;
}

.yv-leftnav .nav-drop {
flex: 0 0 auto;
width: auto;
}

.yv-leftnav__link {
white-space: nowrap;
}

.yv-leftnav .nav-drop__panel,
.yv-leftnav .nav-drop__panel[role="menu"],
.yv-leftnav [role="menu"].nav-drop__panel {
display: none !important;
}
}

.hero,
.fs-hero,
.yi-hero {
background: var(--grad-power);
color: var(--text);
}

.hero {
padding-block: clamp(2.5rem, 5.6vw, 4.8rem);
}

.hero__bg,
.fs-hero__bg,
.yi-hero__orb {
display: none;
}

.hero__inner {
grid-template-columns: minmax(0, 0.96fr) minmax(420px, 1.04fr);
align-items: start;
gap: clamp(1.8rem, 4vw, 3.4rem);
}

.hero__copy {
max-width: 680px;
padding-top: clamp(0.35rem, 1.8vw, 1.2rem);
}

.hero__eyebrow,
.fs-hero__eyebrow,
.yi-hero__eyebrow,
.section__eyebrow,
.yi-eye {
letter-spacing: 0;
text-transform: none;
font-size: 0.86rem;
font-weight: 700;
}

.hero__eyebrow,
.fs-hero__eyebrow {
background: rgba(255, 255, 255, 0.78);
border-color: rgba(47, 111, 82, 0.18);
color: var(--sage-dk);
}

.hero__title {
max-width: 12ch;
font-size: clamp(3rem, 5.2vw, 4.65rem);
line-height: 1.03;
color: var(--ink-900);
}

.hero__lead {
max-width: 56ch;
font-size: 1.08rem;
color: var(--text-soft);
}

.hero__badges {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.8rem;
margin-top: 1.6rem;
}

.hero__badges li {
max-width: none;
min-width: 0;
padding: 0.78rem 0.9rem;
border: 1px solid rgba(47, 111, 82, 0.12);
border-radius: 14px;
background: rgba(255, 255, 255, 0.7);
box-shadow: var(--shadow-sm);
}

.hero__badges span {
font-size: 1.42rem;
color: var(--sage-dk);
}

.hero__trust {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}

.hero__trust span {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0.36rem 0.76rem;
border: 1px solid rgba(191, 145, 65, 0.24);
border-radius: 999px;
background: rgba(255, 255, 255, 0.62);
color: #6b604f;
font-size: 0.84rem;
font-weight: 700;
}

.hero__feature {
border-radius: 14px;
background: rgba(255, 255, 255, 0.82);
border-color: rgba(47, 111, 82, 0.12);
box-shadow: var(--shadow-sm);
}

.hero__feature:hover {
background: #fff;
border-color: rgba(47, 111, 82, 0.26);
}

.hero__practice {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
gap: 1rem 1.4rem;
margin-top: 0.6rem;
padding: 1.35rem 1.5rem;
border: 1px solid rgba(47, 111, 82, 0.12);
border-radius: 18px;
background: rgba(255, 255, 255, 0.74);
box-shadow: var(--shadow-sm);
overflow: hidden;
}

.hero__practice::before,
.hero__practice::after {
display: none;
}

.hero__practice-eyebrow,
.hero__practice-title,
.hero__practice-lead,
.hero__practice-verse {
grid-column: 1;
}

.hero__practice-eyebrow {
letter-spacing: 0;
text-transform: none;
color: var(--sage-dk);
}

.hero__practice-title {
font-size: 1.8rem;
color: var(--ink-900);
}

.hero__practice-title em {
color: var(--gold);
}

.hero__practice-lead,
.hero__practice-list li,
.hero__practice-verse {
color: var(--text-soft);
}

.hero__practice-list {
grid-column: 2;
grid-row: 1 / span 4;
align-self: center;
margin: 0;
}

.hero__practice-ico {
width: auto;
min-width: 68px;
height: 28px;
padding: 0 0.55rem;
border-radius: 999px;
background: rgba(114, 169, 130, 0.13);
color: var(--sage-dk);
font-size: 0.72rem;
font-weight: 700;
}

.hero__practice-list b {
color: var(--ink-900);
}

.hero__feature-title,
.wv-head__title,
.section__title {
color: var(--ink-900);
}

.hero__guides .wv-head__title {
color: var(--ink-900);
font-size: 1.9rem;
}

.hero__guides .wv-head__title b {
color: var(--sage);
}

.hero__feature-sub,
.wv-head__eyebrow,
.section__lead {
color: var(--text-soft);
}

.hero__guides .wv-head__eyebrow {
color: var(--sage-dk);
}

.hero__aside {
width: 100%;
min-width: 0;
align-self: start;
}

.hero__guides {
position: relative;
overflow: hidden;
border-radius: 20px;
}

.hero__guides > * {
position: relative;
z-index: 1;
}

.hero__guides .wv-head {
margin-bottom: 1rem;
padding-inline: 0.1rem;
}

.hero__guides .wv-head__eyebrow {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0.26rem 0.68rem;
border: 1px solid rgba(47, 111, 82, 0.14);
border-radius: 999px;
background: rgba(255, 255, 255, 0.68);
font-size: 0.78rem;
}

.hero__guides .wv-head__title {
max-width: 20ch;
font-size: clamp(1.45rem, 2.2vw, 2rem);
line-height: 1.08;
}

.hero__guides .wv-frames {
grid-template-columns: 1fr;
gap: 0.95rem;
}

.hero__guides .wv-frame {
margin: 0;
border-radius: 12px;
border-color: rgba(47, 111, 82, 0.16);
background: #fff;
box-shadow: 0 18px 42px -30px rgba(23, 60, 49, 0.46);
}

.hero__guides .wv-frame__stage {
aspect-ratio: 16 / 9;
background: #10271f;
}

.hero__guides .wv-frame__stage::after {
background: linear-gradient(180deg, rgba(9, 20, 15, 0.05), rgba(9, 20, 15, 0.1) 44%, rgba(9, 20, 15, 0.48));
}

.hero__guides .wv-frame__video {
object-fit: cover;
object-position: center;
}

.hero__guides .wv-frame__name {
top: 10px;
left: 10px;
padding: 6px 10px;
font-size: 0.76rem;
background: rgba(11, 24, 18, 0.58);
}

.hero__guides .wv-frame__cap {
left: 10px;
right: 10px;
bottom: 46px;
padding: 8px 10px;
border-radius: 8px;
background: rgba(8, 24, 18, 0.68);
font-size: clamp(0.72rem, 0.9vw, 0.82rem);
line-height: 1.32;
backdrop-filter: blur(8px);
}

.hero__guides .wv-play {
background: linear-gradient(180deg, rgba(9, 20, 15, 0.03) 36%, rgba(9, 20, 15, 0.36));
}

.hero__guides .wv-play__disc {
width: clamp(48px, 11%, 62px);
background: linear-gradient(135deg, #2f6f52, #8ab883);
}

.hero__guides .wv-play__label {
bottom: 12px;
padding: 6px 12px;
font-size: 0.76rem;
color: var(--ink-900);
background: rgba(255, 255, 255, 0.94);
}

.hero__guides .wv-frame.is-playing .wv-play {
opacity: 0;
}

.hero__guides .wv-frame.is-muted-run .wv-play {
opacity: 1;
background: linear-gradient(180deg, rgba(9, 20, 15, 0.02) 42%, rgba(9, 20, 15, 0.38));
}

.hero__guides .wv-frame.is-muted-run .wv-play__disc {
display: grid;
}

/* Muted autoplay: the main control pauses (sound has its own button). */
.hero__guides .wv-frame.is-muted-run .wv-ico-play {
display: none;
}

.hero__guides .wv-frame.is-muted-run .wv-ico-pause {
display: block;
}

.hero__guides .wv-frame.is-playing:hover .wv-play,
.hero__guides .wv-frame.is-playing:focus-within .wv-play {
opacity: 1;
}

.hero__guides .wv-lang {
gap: 7px;
padding: 10px;
border-top: 1px solid rgba(47, 111, 82, 0.12);
background: rgba(255, 255, 255, 0.94);
backdrop-filter: none;
}

.hero__guides .wv-lang__row {
grid-template-columns: minmax(96px, 0.7fr) minmax(0, 1.3fr);
gap: 8px;
}

.hero__guides .wv-lang__label {
color: #4d695b;
font-size: 0.75rem;
}

.hero__guides .wv-lang__select {
border-radius: 8px;
border-color: rgba(47, 111, 82, 0.18);
background-color: #f7fbf7;
color: var(--ink-900);
font-size: 0.78rem;
}

.wv-frame,
.why-card,
.fs-step,
.fs-next__card,
.yi-card,
.yi-step,
.pose,
.family-card,
.pl-card,
.ab-card,
.contact-card,
.pf-card {
border-radius: 14px;
background-color: rgba(255, 255, 255, 0.86);
border-color: rgba(47, 111, 82, 0.12);
box-shadow: 0 16px 46px -34px rgba(23, 60, 49, 0.38);
}

.fs-hero__title,
.fs-next__head h2,
.yi-hero__title,
.yi-h2 {
color: var(--ink-900);
}

.fs-hero__title b,
.yi-hero__title em,
.hero__accent {
color: var(--gold);
background: none;
}

.fs-hero__lead,
.fs-hero__badges li,
.fs-next__head p,
.yi-hero__intro,
.yi-hero__sub,
.yi-body {
color: var(--text-soft);
}

.yi-dark .yi-h2,
.yi-dark .yi-step__label,
.yi-quote__text,
.ck-quote__text,
.yn-quote__text {
color: #f8fff9;
}

.yi-dark .yi-body,
.yi-dark__head .yi-body,
.yi-quote__attr,
.ck-quote__attr,
.yn-quote__attr {
color: rgba(248, 255, 249, 0.76);
}

.yi-dark .yi-eye,
.yi-quote__mark,
.ck-quote__mark,
.yn-quote__mark {
color: var(--sky);
}

.yi-card__sub,
.yi-sand .yi-card__sub,
.yi-light .yi-card__sub {
color: #758276;
}

.yi-card__num,
.yi-sand .yi-card__num,
.yi-light .yi-card__num {
color: var(--sage-dk);
}

.yi-card__tags li,
.yi-sand .yi-card__tags li,
.yi-light .yi-card__tags li {
background: rgba(114, 169, 130, 0.13);
color: #466c59;
}

.yi-dark,
.yi-quote,
.ck-quote,
.yn-quote,
.foot {
background: #183b32;
}

.yi-light,
.yi-sand,
.fs-steps,
.fs-next,
.why {
background: linear-gradient(180deg, #fbfaf5 0%, #f3f8f1 100%);
}

.yi-card__name,
.yi-step__label,
.yi-sand .yi-card__name,
.yi-light .yi-card__name {
color: var(--ink-900);
}

.yi-card__body,
.yi-step__body,
.yi-sand .yi-card__body,
.yi-light .yi-body {
color: var(--text-soft);
}

.foot {
color: var(--text-inv-soft);
}

.foot__brand {
color: #fff;
}

.foot__legal {
border-top-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 980px) {
.hero__inner {
grid-template-columns: 1fr;
}

.hero__title {
max-width: 13ch;
font-size: 3rem;
}
}

@media (max-width: 780px) {
.nav {
position: relative;
flex-wrap: nowrap;
}

.nav__links {
position: absolute;
top: calc(100% + 40px);
right: clamp(1rem, 4vw, 2.5rem);
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0.3rem;
min-width: min(280px, calc(100vw - 2rem));
max-height: calc(100vh - 172px);
padding: 0.65rem;
overflow-y: auto;
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(47, 111, 82, 0.14);
border-radius: 16px;
box-shadow: var(--shadow);
z-index: 120;
}

.nav__link {
width: 100%;
}

.hero {
padding-block: 2.5rem 1rem;
}

.hero__title {
max-width: 100%;
font-size: 2.5rem;
}

.hero__badges li {
flex: 1 1 100%;
}

.hero__badges {
grid-template-columns: 1fr;
}

.hero__guides {
border-radius: 16px;
}

.hero__guides .wv-head__title {
max-width: none;
}

.hero__guides .wv-frame__cap {
bottom: 44px;
font-size: 0.72rem;
}

.hero__practice {
grid-template-columns: 1fr;
}

.hero__practice-eyebrow,
.hero__practice-title,
.hero__practice-lead,
.hero__practice-verse,
.hero__practice-list {
grid-column: 1;
grid-row: auto;
}

.fs-topnav {
align-items: flex-start;
}

.fs-topnav__links {
width: 100%;
overflow-x: auto;
padding-bottom: 0.12rem;
}
}

/* ---------- Frameless tabs: calm text navigation ---------- */
.nav__links.yv-primary-tabs,
.fs-topnav__links.yv-primary-tabs {
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
padding: 0.5rem 0 0;
}

.nav__links.yv-primary-tabs .nav__link,
.fs-topnav__links.yv-primary-tabs > a,
.fs-topnav__links.yv-primary-tabs .yv-nav-side > a,
.yv-primary-tabs .nav-drop__tab {
overflow: visible;
min-height: 30px;
padding: 0.36rem 0.38rem;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: #486557;
}

.nav__links.yv-primary-tabs .nav__link:hover,
.fs-topnav__links.yv-primary-tabs > a:hover,
.fs-topnav__links.yv-primary-tabs .yv-nav-side > a:hover,
.yv-primary-tabs .nav-drop__tab:hover {
background: transparent;
box-shadow: none;
color: var(--ink-900);
transform: none;
}

.nav__links.yv-primary-tabs .nav__link.is-active,
.fs-topnav__links.yv-primary-tabs .yv-nav-side > a.is-cta,
.fs-topnav__links.yv-primary-tabs a.is-cta,
.yv-primary-tabs .nav-drop__tab.is-cta {
border: 0;
background: transparent;
box-shadow: none;
color: var(--sage-dk);
}

.nav__links.yv-primary-tabs .nav__link.is-active::after,
.fs-topnav__links.yv-primary-tabs .yv-nav-side > a.is-cta::after,
.fs-topnav__links.yv-primary-tabs a.is-cta::after,
.yv-primary-tabs .nav-drop__tab.is-cta::after {
content: "";
position: absolute;
left: 0.36rem;
right: 0.36rem;
bottom: -0.1rem;
display: block;
height: 2px;
border-radius: 99px;
background: linear-gradient(90deg, var(--sage-dk), var(--gold));
}

.yv-leftnav {
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
padding-left: 1rem;
}

.yv-leftnav__label {
padding-left: 0.16rem;
}

.yv-leftnav__link {
overflow: visible;
padding: 0.48rem 0.16rem 0.48rem 0.7rem;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}

.yv-leftnav__link::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 3px;
height: 0;
border-radius: 99px;
background: linear-gradient(180deg, var(--sage-dk), var(--gold));
transform: translateY(-50%);
transition: height 0.18s ease;
}

.yv-leftnav__link:hover,
.yv-leftnav__link:focus-visible {
background: transparent;
border-color: transparent;
box-shadow: none;
color: var(--ink-900);
transform: translateX(2px);
}

.yv-leftnav__link:hover::before,
.yv-leftnav__link:focus-visible::before,
.yv-leftnav__link.is-current::before {
height: 62%;
}

.yv-leftnav__link.is-current {
background: transparent;
border-color: transparent;
box-shadow: none;
color: var(--sage-dk);
}

@media (max-width: 900px) {
.yv-leftnav {
background: transparent;
border: 0;
box-shadow: none;
max-width: 100vw;
overflow: hidden;
padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.yv-leftnav__list {
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 0.2rem;
}

.yv-leftnav__link {
padding: 0.42rem 0.36rem 0.44rem;
}

.yv-leftnav__link::before {
left: 0.36rem;
right: 0.36rem;
top: auto;
bottom: 0;
width: auto;
height: 2px;
opacity: 0;
transform: none;
}

.yv-leftnav__link:hover::before,
.yv-leftnav__link:focus-visible::before,
.yv-leftnav__link.is-current::before {
height: 2px;
opacity: 1;
}
}

/* ---------- Split logo header ---------- */
.nav,
.fs-topnav {
position: relative;
align-items: center;
justify-content: center;
gap: 0;
padding: clamp(0.58rem, 1.4vw, 0.86rem) clamp(1rem, 3.2vw, 2.4rem);
}

.nav__brand,
.fs-topnav__brand {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
max-width: min(380px, 78vw);
padding: 0;
line-height: 1;
text-align: center;
}

.nav__logo {
display: flex;
align-items: center;
justify-content: center;
filter: none;
}

.nav__brand .yv-logo-img,
.fs-topnav__brand .yv-logo-img {
width: clamp(176px, 14.8vw, 232px);
height: auto;
aspect-ratio: 1;
border-radius: 0;
background: transparent;
object-fit: contain;
image-rendering: auto;
box-shadow: none;
}

.nav__name,
.fs-topnav__brand span {
display: none;
}

.nav__links.yv-split-tabs,
.fs-topnav__links.yv-split-tabs {
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(226px, 20vw, 308px) minmax(0, 1fr);
align-items: center;
width: 100%;
min-height: clamp(178px, 14vw, 236px);
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}

.yv-nav-side {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.46rem clamp(0.7rem, 1.15vw, 1.05rem);
min-width: 0;
}

.yv-nav-side--left {
grid-column: 1;
justify-content: flex-end;
padding-right: clamp(0.4rem, 1.2vw, 1rem);
}

.yv-nav-side--right {
grid-column: 3;
justify-content: flex-start;
padding-left: clamp(0.4rem, 1.2vw, 1rem);
}

.nav__links.yv-split-tabs .nav__link,
.fs-topnav__links.yv-split-tabs .yv-nav-side > a,
.yv-split-tabs .nav-drop__tab {
max-width: min(178px, 20vw);
}

@media (min-width: 781px) {
.nav__brand,
.fs-topnav__brand {
position: absolute;
left: 50%;
top: 50%;
z-index: 4;
margin: 0;
transform: translate(-50%, -50%);
}

.nav__links.yv-split-tabs,
.fs-topnav__links.yv-split-tabs {
flex: none;
flex-basis: auto;
}
}

@media (max-width: 1100px) and (min-width: 781px) {
.nav__links.yv-split-tabs,
.fs-topnav__links.yv-split-tabs {
grid-template-columns: minmax(0, 1fr) clamp(188px, 22vw, 244px) minmax(0, 1fr);
min-height: clamp(158px, 19vw, 204px);
}

.nav__brand .yv-logo-img,
.fs-topnav__brand .yv-logo-img {
width: clamp(150px, 17vw, 190px);
}

.yv-nav-side {
gap: 0.34rem 0.54rem;
}

.nav__links.yv-split-tabs .nav__link,
.fs-topnav__links.yv-split-tabs .yv-nav-side > a,
.yv-split-tabs .nav-drop__tab {
max-width: 142px;
font-size: 0.72rem;
}

/* Let the tabs beside the logo use the available column width. Labels may
   wrap between words ("Yoga and Wellbeing / Teachers"): forcing one line
   (nowrap) made that label wider than its column at ~1000-1100px so it
   overlapped the neighbouring tab. */
.nav__links.yv-split-tabs .yv-nav-side--left .nav__link,
.fs-topnav__links.yv-split-tabs .yv-nav-side--left > a,
.nav__links.yv-split-tabs .yv-nav-side--left .nav-drop__tab,
.fs-topnav__links.yv-split-tabs .yv-nav-side--left .nav-drop__tab {
max-width: none;
white-space: normal;
}
}

@media (max-width: 780px) {
.nav,
.fs-topnav {
position: relative;
flex-direction: column;
padding-inline: clamp(0.9rem, 4vw, 1.25rem);
padding-top: 0.78rem;
padding-bottom: 0.72rem;
}

.nav__brand .yv-logo-img,
.fs-topnav__brand .yv-logo-img {
width: min(168px, 56vw);
}

.nav__toggle {
position: absolute;
top: 0.72rem;
right: clamp(0.9rem, 4vw, 1.25rem);
}

.nav__links.yv-split-tabs {
top: calc(100% + 0.28rem);
display: flex;
flex-direction: column;
align-items: stretch;
min-height: 0;
}

.nav__links.yv-split-tabs .yv-nav-side {
display: contents;
}

.fs-topnav__links.yv-split-tabs {
display: flex;
justify-content: flex-start;
align-items: center;
min-height: 0;
overflow-x: auto;
overflow-y: visible;
padding-bottom: 0.2rem;
}

.fs-topnav__links.yv-split-tabs .yv-nav-side {
display: flex;
flex: 0 0 auto;
flex-wrap: nowrap;
gap: 0.36rem;
padding: 0;
}

.fs-topnav__links.yv-split-tabs .yv-nav-side + .yv-nav-side {
margin-left: 0.36rem;
}

.nav__links.yv-split-tabs .nav__link,
.fs-topnav__links.yv-split-tabs .yv-nav-side > a,
.yv-split-tabs .nav-drop__tab {
max-width: none;
}
}

/* ---------- Premium right-aligned masthead ---------- */
@media (min-width: 781px) {
.site-top,
.site-topgroup {
background:
radial-gradient(circle at 8% 0%, rgba(157, 216, 207, 0.28), transparent 32%),
linear-gradient(112deg, rgba(255, 255, 255, 0.98), rgba(244, 252, 247, 0.98) 54%, rgba(255, 250, 239, 0.97));
border-bottom: 1px solid rgba(47, 111, 82, 0.12);
box-shadow: 0 22px 52px -42px rgba(23, 60, 49, 0.54);
backdrop-filter: blur(18px);
}

.nav,
.fs-topnav {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
gap: clamp(1rem, 2vw, 2.25rem);
min-height: clamp(110px, 9vw, 142px);
padding: clamp(0.52rem, 0.95vw, 0.86rem) clamp(1rem, 2.7vw, 2.5rem);
border-bottom: 1px solid rgba(47, 111, 82, 0.14);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(249, 253, 250, 0.58));
}

.nav::after,
.fs-topnav::after {
left: clamp(1rem, 2.7vw, 2.5rem);
right: clamp(1rem, 2.7vw, 2.5rem);
background: linear-gradient(90deg, rgba(47, 111, 82, 0.18), rgba(191, 145, 65, 0.34), rgba(47, 111, 82, 0.12));
}

.nav__brand,
.fs-topnav__brand {
position: static;
left: auto;
top: auto;
z-index: 5;
flex: 0 0 auto;
max-width: clamp(132px, 11vw, 176px);
margin: 0;
padding: 0;
transform: none;
}

.nav__brand .yv-logo-img,
.fs-topnav__brand .yv-logo-img {
width: clamp(126px, 9.8vw, 164px);
height: auto;
aspect-ratio: 1;
border-radius: 0;
background: transparent;
object-fit: contain;
image-rendering: auto;
box-shadow: none;
}

.nav__logo {
padding: 0.14rem;
border-radius: 20px;
background: rgba(255, 255, 255, 0.38);
box-shadow:
0 18px 34px -30px rgba(23, 60, 49, 0.52),
inset 0 0 0 1px rgba(47, 111, 82, 0.06);
}

.nav__links.yv-split-tabs,
.fs-topnav__links.yv-split-tabs {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 1 1 auto;
flex-wrap: nowrap;
width: auto;
min-width: 0;
min-height: 0;
gap: clamp(0.22rem, 0.36vw, 0.46rem);
margin-left: auto;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}

.yv-nav-side {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 0 0 auto;
flex-wrap: nowrap;
gap: clamp(0.22rem, 0.36vw, 0.46rem);
min-width: 0;
}

.yv-nav-side--left,
.yv-nav-side--right {
grid-column: auto;
padding: 0;
}

.nav__links.yv-split-tabs .nav__link,
.fs-topnav__links.yv-split-tabs .yv-nav-side > a,
.nav__links.yv-split-tabs .nav-drop__tab,
.fs-topnav__links.yv-split-tabs .nav-drop__tab,
.yv-split-tabs .nav-drop__tab {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
max-width: none;
min-height: 34px;
padding: 0.42rem clamp(0.36rem, 0.58vw, 0.66rem);
border: 1px solid transparent;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
color: #315f4a;
font-size: clamp(0.72rem, 0.74vw, 0.86rem);
font-weight: 700;
letter-spacing: 0;
line-height: 1;
text-align: center;
white-space: nowrap;
}

.nav__links.yv-primary-tabs .nav__link:hover,
.fs-topnav__links.yv-primary-tabs a:hover,
.fs-topnav__links.yv-primary-tabs .yv-nav-side > a:hover,
.yv-primary-tabs .nav-drop__tab:hover {
border-color: rgba(47, 111, 82, 0.14);
background: rgba(255, 255, 255, 0.64);
color: var(--ink-900);
box-shadow: 0 10px 22px -20px rgba(23, 60, 49, 0.46);
}

.nav__links.yv-primary-tabs .nav__link.is-active,
.fs-topnav__links.yv-primary-tabs .yv-nav-side > a.is-cta,
.fs-topnav__links.yv-primary-tabs a.is-cta,
.yv-primary-tabs .nav-drop__tab.is-cta {
border-color: rgba(47, 111, 82, 0.2);
background: rgba(238, 249, 240, 0.82);
color: var(--sage-dk);
}
}

@media (min-width: 781px) and (max-width: 1240px) {
.nav,
.fs-topnav {
gap: 0.75rem;
min-height: 104px;
padding-inline: clamp(0.75rem, 2vw, 1.35rem);
}

.nav__brand,
.fs-topnav__brand {
max-width: 116px;
}

.nav__brand .yv-logo-img,
.fs-topnav__brand .yv-logo-img {
width: 114px;
}

.nav__links.yv-split-tabs,
.fs-topnav__links.yv-split-tabs {
justify-content: flex-start;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: visible;
scrollbar-width: thin;
padding-bottom: 0.18rem;
}

.yv-nav-side {
gap: 0.25rem;
}

.nav__links.yv-split-tabs .nav__link,
.fs-topnav__links.yv-split-tabs .yv-nav-side > a,
.nav__links.yv-split-tabs .nav-drop__tab,
.fs-topnav__links.yv-split-tabs .nav-drop__tab,
.yv-split-tabs .nav-drop__tab {
font-size: 0.69rem;
padding-inline: 0.36rem;
}
}

/* ---------- Homepage native guide video players ---------- */
.hero {
padding-block: clamp(0.9rem, 2.2vw, 1.9rem) clamp(1.4rem, 2.8vw, 2.4rem);
background: var(--yv-site-bg, #f9fdfb);
box-sizing: border-box;
}

.hero__bg {
display: block;
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
background: var(--yv-site-bg, #f9fdfb);
}

.hero__bg::after {
content: "";
position: absolute;
inset: 0;
background:
rgba(249, 253, 251, 0.58);
}

.hero__bg-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0.7;
opacity: 0.88;
filter: saturate(1) brightness(1.03);
transition: opacity 3s ease;
}

.hero__bg.is-ended .hero__bg-video {
opacity: 0;
}

.hero__bg .hero__orb {
display: none;
}

.hero__inner {
max-width: min(1560px, calc(100vw - 2rem));
grid-template-columns: minmax(340px, 0.85fr) minmax(560px, 1.15fr);
gap: clamp(1rem, 2vw, 1.8rem);
}

.hero__copy {
grid-column: 1;
padding-top: 0;
}

.hero__title {
font-size: clamp(2.55rem, 4.4vw, 4.05rem);
}

.hero__aside {
grid-column: 2;
grid-row: 1;
align-self: start;
}

.hero__practice {
grid-column: 1;
grid-template-columns: 1fr;
gap: 0.55rem;
margin-top: 0;
padding: 1rem;
}

.hero__practice-eyebrow,
.hero__practice-title,
.hero__practice-lead,
.hero__practice-verse,
.hero__practice-list {
grid-column: 1;
grid-row: auto;
}

.hero__practice-title {
font-size: 1.35rem;
}

.hero__practice-list {
gap: 0.35rem;
}

.hero__practice-list li {
font-size: 0.82rem;
line-height: 1.36;
}

.hero__guides {
border-radius: 16px;
}

.hero__guides .wv-head {
margin-bottom: 0.7rem;
}

.hero__guides .wv-head__eyebrow {
min-height: 0;
padding: 0;
border: 0;
background: transparent;
font-size: 0.78rem;
}

.hero__guides .wv-head__title {
max-width: none;
font-size: clamp(1.22rem, 1.7vw, 1.55rem);
line-height: 1.12;
}

.hero__guides .wv-frames {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(0.72rem, 1.4vw, 1rem);
}

.hero__guides .wv-frame {
border-radius: 14px;
background: #fff;
overflow: hidden;
}

.hero__guides .wv-frame__titlebar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8rem;
padding: 0.65rem 0.75rem;
background: #fbf8f0;
border-bottom: 1px solid rgba(47, 111, 82, 0.12);
}

.hero__guides .wv-frame__heading {
min-width: 0;
flex: 1 1 auto;
font-family: var(--font-heading);
font-size: clamp(0.92rem, 1.1vw, 1.08rem);
font-weight: 700;
line-height: 1.18;
color: var(--ink-900);
}

.hero__guides .wv-frame__tools {
display: inline-flex;
align-items: center;
gap: 0.22rem;
flex: 0 0 auto;
}

.wv-mini {
width: 28px;
height: 28px;
display: inline-grid;
place-items: center;
border: 1px solid rgba(47, 111, 82, 0.16);
border-radius: 8px;
background: #fff;
color: var(--sage-dk);
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.wv-mini:hover,
.wv-mini:focus-visible {
transform: translateY(-1px);
border-color: rgba(47, 111, 82, 0.34);
background: #f2faf4;
outline: none;
}

.wv-mini svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 2.8;
stroke-linecap: round;
stroke-linejoin: round;
}

.wv-prev svg,
.wv-next svg {
width: 14px;
height: 14px;
}

.wv-stage-large {
position: absolute;
top: 0.62rem;
right: 0.62rem;
z-index: 6;
width: 34px;
height: 34px;
border-color: rgba(255, 255, 255, 0.68);
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 10px 22px -14px rgba(5, 8, 5, 0.7);
backdrop-filter: blur(8px);
}

.wv-stage-large svg {
width: 17px;
height: 17px;
stroke-width: 2.35;
}

.hero__guides .wv-frame__stage {
aspect-ratio: 16 / 9;
background: #050805;
}

.hero__guides .wv-frame__stage::after,
.hero__guides .wv-frame__scene,
.hero__guides .wv-motion,
.hero__guides .wv-frame__cap,
.hero__guides .wv-frame__name {
display: none !important;
}

.hero__guides .wv-frame__video {
object-fit: contain;
object-position: center;
background: #050805;
animation: none !important;
filter: none !important;
}

.hero__guides .wv-frame__placeholder {
position: absolute;
inset: 0;
z-index: 2;
display: grid;
place-items: center;
align-content: center;
gap: 0.4rem;
padding: 1.4rem;
text-align: center;
background:
linear-gradient(135deg, rgba(47, 111, 82, 0.18), rgba(191, 145, 65, 0.12)),
#f8fbf7;
color: var(--text-soft);
}

.hero__guides .wv-frame__placeholder[hidden] {
display: none !important;
}

.hero__guides .wv-frame__placeholder strong {
font-family: var(--font-heading);
font-size: 1.12rem;
color: var(--ink-900);
}

.hero__guides .wv-frame__placeholder span {
max-width: 28ch;
font-size: 0.82rem;
line-height: 1.45;
}

.hero__guides .wv-play {
background: transparent;
}

.hero__guides .wv-play:hover,
.hero__guides .wv-play:focus-visible {
background: rgba(5, 8, 5, 0.08);
outline: none;
}

.hero__guides .wv-frame.is-playing .wv-play {
opacity: 0;
background: transparent;
}

.hero__guides .wv-frame.is-muted-run .wv-play {
opacity: 1;
background: transparent;
}

.hero__guides .wv-frame.is-muted-run .wv-play__disc {
display: grid;
}

.hero__guides .wv-frame.is-muted-run .wv-ico-play {
display: none;
}

.hero__guides .wv-frame.is-muted-run .wv-ico-pause {
display: block;
}

.hero__guides .wv-frame.is-playing:hover .wv-play,
.hero__guides .wv-frame.is-playing:focus-within .wv-play {
opacity: 1;
background: rgba(5, 8, 5, 0.08);
}

.hero__guides .wv-play:disabled {
opacity: 1;
cursor: default;
background: transparent;
}

.hero__guides .wv-play:disabled .wv-play__disc {
display: none;
}

.hero__guides .wv-play__label {
bottom: 14px;
max-width: calc(100% - 1.5rem);
white-space: normal;
text-align: center;
}

.hero__guides .wv-frame.is-video-pending .wv-play__label {
color: var(--sage-dk);
background: rgba(255, 255, 255, 0.9);
}

.hero__guides .wv-lang {
padding: 0.72rem;
}

.hero__guides .wv-lang__row--language {
display: none;
}

.hero__guides .wv-lang__row {
grid-template-columns: 1fr;
gap: 0.45rem;
}

.hero__guides .wv-lang__label {
white-space: normal;
font-size: 0.78rem;
line-height: 1.25;
color: var(--ink-900);
}

.hero__guides .wv-lang__select {
border-radius: 10px;
font-size: 0.86rem;
padding-block: 0.62rem;
}

.wv-large-open {
overflow: hidden;
}

.wv-large-view[hidden] {
display: none !important;
}

.wv-large-view {
position: fixed;
inset: 0;
z-index: 1000;
display: grid;
place-items: center;
padding: clamp(1rem, 3vw, 2rem);
background: rgba(15, 28, 20, 0.42);
backdrop-filter: blur(5px);
}

.wv-large-view__panel {
width: min(1040px, 92vw);
max-height: min(760px, 84vh);
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
overflow: hidden;
border: 1px solid rgba(47, 111, 82, 0.18);
border-radius: 18px;
background: #fffdf7;
box-shadow: 0 30px 90px -36px rgba(0, 0, 0, 0.55);
}

.wv-large-view__top,
.wv-large-view__controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.7rem;
padding: 0.8rem 1rem;
}

.wv-large-view__top {
border-bottom: 1px solid rgba(47, 111, 82, 0.12);
}

.wv-large-view__top h3 {
margin: 0;
font-family: var(--font-heading);
font-size: clamp(1rem, 2vw, 1.35rem);
line-height: 1.2;
color: var(--ink-900);
}

.wv-large-view__stage {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 16 / 9;
max-height: 66vh;
background: #050805;
}

.wv-large-view__video {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
background: #050805;
}

.wv-large-view__placeholder {
display: grid;
place-items: center;
align-content: center;
gap: 0.5rem;
width: 100%;
height: 100%;
padding: 1.6rem;
text-align: center;
background: #f8fbf7;
color: var(--text-soft);
}

.wv-large-view__placeholder[hidden] {
display: none !important;
}

.wv-large-view__placeholder strong {
font-family: var(--font-heading);
font-size: clamp(1.15rem, 2.2vw, 1.6rem);
color: var(--ink-900);
}

.wv-large-view__placeholder span {
max-width: 42ch;
font-size: 0.95rem;
line-height: 1.5;
}

.wv-large-view__controls {
justify-content: flex-end;
border-top: 1px solid rgba(47, 111, 82, 0.12);
background: #fbf8f0;
}

.wv-large-view__play,
.wv-large-view__next,
.wv-large-view__close {
min-height: 38px;
padding: 0 0.95rem;
border: 1px solid rgba(47, 111, 82, 0.16);
border-radius: 999px;
background: #fff;
color: var(--ink-900);
font-weight: 700;
cursor: pointer;
}

.wv-large-view__play {
background: var(--sage-dk);
color: #fff;
}

.wv-large-view__play:disabled {
opacity: 0.45;
cursor: default;
}

@media (max-width: 1180px) {
.hero__inner {
grid-template-columns: 1fr;
max-width: var(--maxw);
}

.hero__copy,
.hero__aside,
.hero__practice {
grid-column: 1;
grid-row: auto;
}

.hero__guides .wv-frames {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 760px) {
.hero__bg::after {
background: rgba(248, 251, 247, 0.7);
}

.hero__guides .wv-frames {
grid-template-columns: 1fr;
}

.hero__guides .wv-frame__titlebar {
align-items: flex-start;
}

@media (prefers-reduced-motion: reduce) {
.hero__bg-video {
display: none;
}
}

.wv-large-view__panel {
width: 94vw;
max-height: 86vh;
}

.wv-large-view__top,
.wv-large-view__controls {
align-items: stretch;
flex-wrap: wrap;
}
}

/* ---------- Centered compact masthead ---------- */
@media (min-width: 781px) {
.site-top,
.site-topgroup {
background:
radial-gradient(circle at 50% -35%, rgba(191, 145, 65, 0.16), transparent 30%),
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 253, 249, 0.94));
border-bottom: 1px solid rgba(47, 111, 82, 0.13);
box-shadow: 0 16px 42px -36px rgba(23, 60, 49, 0.56);
}

.nav,
.fs-topnav {
display: grid !important;
grid-template-columns: minmax(0, 1fr) clamp(86px, 6.8vw, 104px) minmax(0, 1fr);
grid-template-areas: "tabs-left brand tabs-right";
align-items: center;
column-gap: var(--yv-logo-gap);
min-height: 0;
padding: clamp(0.22rem, 0.52vw, 0.44rem) clamp(0.9rem, 2.8vw, 2.4rem);
background: transparent;
border-bottom: 0;
box-shadow: none;
}

.nav::after,
.fs-topnav::after {
left: clamp(0.9rem, 2.8vw, 2.4rem);
right: clamp(0.9rem, 2.8vw, 2.4rem);
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(47, 111, 82, 0.2), rgba(191, 145, 65, 0.24), rgba(47, 111, 82, 0.16), transparent);
}

.nav__brand,
.fs-topnav__brand {
grid-area: brand;
justify-self: center;
align-self: center;
justify-content: center;
position: relative;
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}

/* Stopgap until a transparent logo asset exists: the source is a JPEG with
an opaque white background baked in, and JPEG has no alpha channel, so
mix-blend-mode: multiply on .yv-logo-img (below) is the primary fix, but
it isn't reliably applied in every rendering path (Grid item compositing
can trap the blend against this box's own paint instead of the real nav
background). This patch is the guaranteed fallback: a color sampled from
the actual nav background (measured, not guessed) sits behind the logo so
even if the blend doesn't reach through, the JPEG's white square is close
enough to invisible. Swap all of this for the transparent PNG/SVG once
one is available. */
.nav__brand::before,
.fs-topnav__brand::before {
content: "";
position: absolute;
inset: -0.45rem -2.8rem;
z-index: -1;
border-radius: 0;
background: linear-gradient(90deg, rgba(247, 243, 235, 0) 0%, rgba(247, 243, 235, 0.98) 18%, #f7f3eb 50%, rgba(247, 243, 235, 0.98) 82%, rgba(247, 243, 235, 0) 100%);
pointer-events: none;
}

/* The brand sits on a higher layer (z-index 4-5) than the tabs, so the
glow above (which reaches ~45px past the logo) was painted over the nearest
tab labels: the "P" of Pranayama came out ~45% washed with cream, and at
~780-860px "Pra" disappeared entirely. Lift the tab groups above the brand
so the glow stays behind the text. */
.fs-topnav__links .yv-nav-side,
.nav__links .yv-nav-side {
position: relative;
z-index: 6;
}

.nav__logo {
padding: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
filter: none;
}

.nav__brand .yv-logo-img,
.fs-topnav__brand .yv-logo-img {
width: clamp(86px, 6.8vw, 102px);
height: auto;
aspect-ratio: 1;
border-radius: 0;
object-fit: contain;
}

.nav__toggle {
display: none;
}

.nav__links.yv-split-tabs,
.fs-topnav__links.yv-split-tabs {
display: contents !important;
width: auto;
min-width: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}

/* Tabs size to their own label instead of each taking a forced 1/5 of the
side. Equal fractions left short labels (Login) marooned in the middle of
an oversized cell, which read as a gap between Plans and Login. */
/* One explicit gap, shared by both sides, so every tab-to-tab gap across
the whole header is the same width. Distributing leftover space per side
(space-between) produced different gaps left vs right, because each side
holds a different total label width. */
.yv-nav-side {
display: grid;
grid-auto-flow: column;
grid-auto-columns: auto;
align-items: center;
width: 100%;
min-width: 0;
column-gap: var(--yv-tab-gap);
}

/* Both groups pack toward the logo, so the innermost tab on each side
(Surya Namaskar, Pranayama) sits the same distance from it regardless of
how much total label width each side holds. Leftover slack is pushed to
the outer screen edges instead, where an uneven amount is far less
noticeable than it is right next to the logo. */
.yv-nav-side--left {
grid-area: tabs-left;
justify-self: stretch;
justify-content: end;
padding: 0;
}

.yv-nav-side--right {
grid-area: tabs-right;
justify-self: stretch;
justify-content: start;
padding: 0;
}

.yv-nav-side > a,
.yv-nav-side > .nav-drop {
width: 100%;
min-width: 0;
}

.nav__links.yv-split-tabs .nav__link,
.fs-topnav__links.yv-split-tabs .yv-nav-side > a,
.nav__links.yv-split-tabs .nav-drop__tab,
.fs-topnav__links.yv-split-tabs .nav-drop__tab,
.yv-split-tabs .nav-drop__tab {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-width: 0;
min-height: 30px;
padding: 0.34rem clamp(0.26rem, 0.48vw, 0.54rem);
border-color: transparent;
background: transparent;
box-shadow: none;
color: #2e5c48;
font-size: clamp(0.68rem, 0.74vw, 0.82rem);
font-weight: 700;
line-height: 1.08;
text-align: center;
white-space: normal;
/* Wrap between words only ("Surya / Namaskar"), never mid-word ("Namaska / r"). */
overflow-wrap: normal;
}

.nav__links.yv-primary-tabs .nav__link:hover,
.fs-topnav__links.yv-primary-tabs a:hover,
.fs-topnav__links.yv-primary-tabs .yv-nav-side > a:hover,
.yv-primary-tabs .nav-drop__tab:hover {
background: rgba(238, 249, 240, 0.8);
border-color: rgba(47, 111, 82, 0.14);
box-shadow: 0 10px 22px -22px rgba(23, 60, 49, 0.42);
}

.nav__links.yv-primary-tabs .nav__link.is-active,
.fs-topnav__links.yv-primary-tabs .yv-nav-side > a.is-cta,
.fs-topnav__links.yv-primary-tabs a.is-cta,
.yv-primary-tabs .nav-drop__tab.is-cta {
background: rgba(238, 249, 240, 0.95);
border-color: rgba(47, 111, 82, 0.14);
color: var(--sage-dk);
}

.nav__links.yv-primary-tabs .nav__link.is-active::after,
.fs-topnav__links.yv-primary-tabs .yv-nav-side > a.is-cta::after,
.fs-topnav__links.yv-primary-tabs a.is-cta::after,
.yv-primary-tabs .nav-drop__tab.is-cta::after {
content: none !important;
display: none !important;
}

.nav__links.yv-split-tabs .nav-drop__caret,
.fs-topnav__links.yv-split-tabs .nav-drop__caret,
.yv-primary-tabs .nav-drop__caret {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 0.34rem;
font-size: 1.08em;
line-height: 1;
opacity: 0.86;
}

.yv-leftnav .nav-drop__caret {
font-size: 1.08em;
opacity: 0.86;
}
}

@media (min-width: 781px) and (max-width: 1240px) {
.nav,
.fs-topnav {
grid-template-columns: minmax(0, 1fr) clamp(72px, 6.9vw, 86px) minmax(0, 1fr);
column-gap: var(--yv-logo-gap);
padding-inline: clamp(0.64rem, 1.8vw, 1.1rem);
}

.nav__brand .yv-logo-img,
.fs-topnav__brand .yv-logo-img {
width: clamp(72px, 6.9vw, 86px);
}

/* Narrow desktops need a tighter gap, but it stays one shared value so both
sides still match each other exactly. */
:root {
--yv-tab-gap: 0.35rem;
}

.nav__links.yv-split-tabs .nav__link,
.fs-topnav__links.yv-split-tabs .yv-nav-side > a,
.nav__links.yv-split-tabs .nav-drop__tab,
.fs-topnav__links.yv-split-tabs .nav-drop__tab,
.yv-split-tabs .nav-drop__tab {
min-height: 29px;
padding-inline: clamp(0.16rem, 0.34vw, 0.32rem);
font-size: clamp(0.58rem, 0.72vw, 0.68rem);
}
}

/* ---------- Final guide control and masthead polish ---------- */
.hero__guides .wv-play {
inset: auto auto 0.72rem 0.72rem !important;
width: 34px !important;
height: 34px !important;
min-width: 0 !important;
display: grid !important;
place-items: center !important;
gap: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: transparent !important;
box-shadow: none !important;
opacity: 1 !important;
transform: none !important;
z-index: 8 !important;
}

.hero__guides .wv-play:hover,
.hero__guides .wv-play:focus-visible {
background: transparent !important;
box-shadow: none !important;
transform: none !important;
}

.hero__guides .wv-play__disc {
width: 34px !important;
height: 34px !important;
border-radius: 50% !important;
background: rgba(47, 111, 82, 0.94) !important;
box-shadow: 0 8px 20px -14px rgba(23, 60, 49, 0.5) !important;
transform: none !important;
}

.hero__guides .wv-frame.is-starting .wv-play__disc {
background: rgba(191, 145, 65, 0.95) !important;
}

.hero__guides .wv-play__disc svg {
width: 46% !important;
height: 46% !important;
}

.hero__guides .wv-play__disc .wv-ico-play {
margin-left: 7%;
}

.hero__guides .wv-play__disc .wv-ico-pause {
margin-left: 0;
}

.hero__guides .wv-play__label {
display: none !important;
}

.hero__guides .wv-frame.is-video-pending .wv-play {
display: none !important;
}

.hero__guides .wv-seek {
position: absolute;
left: 3.45rem;
right: 0.78rem;
bottom: 0.72rem;
z-index: 7;
height: 34px;
display: flex;
align-items: center;
}

.hero__guides .wv-seek__range,
.wv-large-view__seek input {
width: 100%;
height: 4px;
margin: 0;
border: 0;
border-radius: 999px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0 var(--seek-progress, 0%), rgba(255, 255, 255, 0.34) var(--seek-progress, 0%) 100%);
box-shadow: 0 8px 18px -14px rgba(0, 0, 0, 0.8);
cursor: pointer;
appearance: none;
}

.hero__guides .wv-seek__range:disabled,
.wv-large-view__seek input:disabled {
opacity: 0.42;
cursor: default;
}

.hero__guides .wv-seek__range::-webkit-slider-thumb,
.wv-large-view__seek input::-webkit-slider-thumb {
width: 14px;
height: 14px;
border: 2px solid rgba(255, 255, 255, 0.95);
border-radius: 50%;
background: var(--sage);
box-shadow: 0 8px 16px -10px rgba(0, 0, 0, 0.75);
appearance: none;
}

.hero__guides .wv-seek__range::-moz-range-thumb,
.wv-large-view__seek input::-moz-range-thumb {
width: 12px;
height: 12px;
border: 2px solid rgba(255, 255, 255, 0.95);
border-radius: 50%;
background: var(--sage);
box-shadow: 0 8px 16px -10px rgba(0, 0, 0, 0.75);
}

.wv-large-view__seek {
flex: 1 1 260px;
min-width: min(100%, 220px);
display: flex;
align-items: center;
height: 38px;
}

.site-top .nav__brand,
.site-topgroup .fs-topnav__brand,
.site-top .nav__logo,
.site-topgroup .nav__logo {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
}

.site-top .yv-logo-img,
.site-topgroup .yv-logo-img,
.nav__brand .yv-logo-img,
.fs-topnav__brand .yv-logo-img {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
/* Stopgap until a transparent logo asset exists: the source is a JPEG with
an opaque white background baked in, and JPEG carries no alpha channel.
Multiply lets white pixels take on whatever sits behind them while the
dark artwork is left as it is. This only holds while the header stays
light — swap it for the transparent PNG/SVG once one is available. */
mix-blend-mode: multiply;
}

/* ---------- More Valuable Topics mega menu ---------- */
@media (min-width: 781px) {
.yv-nav-side--right > .nav-drop:not(.nav-drop--mega) .nav-drop__panel {
left: 50%;
right: auto;
transform: translate(-50%, -6px) scale(0.98);
transform-origin: top center;
}

.yv-nav-side--right > .nav-drop:not(.nav-drop--mega):hover .nav-drop__panel,
.yv-nav-side--right > .nav-drop:not(.nav-drop--mega):focus-within .nav-drop__panel {
transform: translate(-50%, 0) scale(1);
}

/* Panels size to their own items instead of sitting on a 210px floor that
is wider than their content. That floor was what made a panel centred on
an outer tab hang past the viewport edge; without it every panel stays
centred under its own tab at every width. */
.yv-nav-side > .nav-drop:not(.nav-drop--mega) .nav-drop__panel {
min-width: 0;
width: max-content;
max-width: min(260px, calc(100vw - 2.5rem));
}
}

.nav-drop--mega > .nav-drop__tab {
max-width: 190px;
white-space: normal;
text-align: center;
line-height: 1.08;
}

.nav-drop--mega > .nav-drop__panel.yv-mega-menu,
.nav-drop--mega > .nav-drop__panel[role="menu"].yv-mega-menu {
width: min(920px, calc(100vw - 2rem));
max-width: min(920px, calc(100vw - 2rem));
min-width: min(760px, calc(100vw - 2rem));
padding: 0.78rem;
left: auto;
right: 0;
transform: translate(0, -6px) scale(0.98);
transform-origin: top right;
}

.nav-drop--mega:hover > .nav-drop__panel.yv-mega-menu,
.nav-drop--mega:focus-within > .nav-drop__panel.yv-mega-menu {
transform: translate(0, 0) scale(1) !important;
}

.yv-mega-menu__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.52rem;
}

.yv-mega-menu__group {
min-width: 0;
padding: 0.42rem;
border: 1px solid rgba(47, 111, 82, 0.1);
border-radius: 12px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(245, 252, 247, 0.82));
}

.yv-mega-menu__group.is-current {
border-color: rgba(47, 111, 82, 0.22);
background: linear-gradient(180deg, rgba(238, 249, 240, 0.98), rgba(255, 250, 239, 0.9));
}

.fs-topnav__links .yv-mega-menu a,
.nav__links .yv-mega-menu a,
.yv-split-tabs .yv-mega-menu a {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
border: 0;
box-shadow: none;
text-align: left;
text-decoration: none;
white-space: normal;
}

.fs-topnav__links .yv-mega-menu__topic,
.nav__links .yv-mega-menu__topic,
.yv-split-tabs .yv-mega-menu__topic {
min-height: 30px;
padding: 0.38rem 0.44rem;
border-radius: 10px;
color: #244f40;
font-size: 0.82rem;
font-weight: 700;
line-height: 1.18;
}

.yv-mega-menu__subs {
display: grid;
gap: 0.08rem;
margin-top: 0.12rem;
}

.fs-topnav__links .yv-mega-menu__subs a,
.nav__links .yv-mega-menu__subs a,
.yv-split-tabs .yv-mega-menu__subs a {
min-height: 26px;
padding: 0.3rem 0.44rem;
border-radius: 8px;
color: #587365;
font-size: 0.71rem;
font-weight: 700;
line-height: 1.18;
}

.fs-topnav__links .yv-mega-menu__topic:hover,
.fs-topnav__links .yv-mega-menu__subs a:hover,
.nav__links .yv-mega-menu__topic:hover,
.nav__links .yv-mega-menu__subs a:hover,
.yv-split-tabs .yv-mega-menu__topic:hover,
.yv-split-tabs .yv-mega-menu__subs a:hover {
background: rgba(114, 169, 130, 0.13);
color: var(--ink-900);
}

@media (min-width: 781px) and (max-width: 1240px) {
.nav-drop--mega > .nav-drop__tab {
max-width: 164px;
}

.nav-drop--mega > .nav-drop__panel.yv-mega-menu,
.nav-drop--mega > .nav-drop__panel[role="menu"].yv-mega-menu {
width: min(760px, calc(100vw - 1rem));
min-width: min(680px, calc(100vw - 1rem));
}

.yv-mega-menu__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 780px) {
.nav-drop--mega > .nav-drop__tab {
max-width: none;
text-align: left;
}

.nav-drop--mega > .nav-drop__panel.yv-mega-menu,
.nav-drop--mega > .nav-drop__panel[role="menu"].yv-mega-menu {
position: absolute;
left: 0;
right: auto;
width: min(86vw, 420px);
min-width: min(86vw, 320px);
max-width: min(86vw, 420px);
max-height: 68vh;
overflow: auto;
transform: translate(0, -6px) scale(0.98);
transform-origin: top left;
}

.nav-drop--mega:hover > .nav-drop__panel.yv-mega-menu,
.nav-drop--mega:focus-within > .nav-drop__panel.yv-mega-menu {
transform: translate(0, 0) scale(1) !important;
}

.yv-mega-menu__grid {
grid-template-columns: 1fr;
gap: 0.4rem;
}
}

/* ---------- Homepage premium entry ---------- */
.hero__copy--premium {
display: grid;
gap: clamp(0.78rem, 1.2vw, 1rem);
align-content: start;
}

.hero__copy--premium .hero__eyebrow,
.hero__copy--premium .hero__title,
.hero__copy--premium .hero__lead,
.hero__copy--premium .hero__cta,
.hero__copy--premium .hero__gentle,
.hero__copy--premium .hero__badges,
.hero__copy--premium .hero__trust,
.hero__copy--premium .hero__feature {
margin-top: 0;
margin-bottom: 0;
}

.hero__copy--premium .hero__eyebrow {
display: inline-flex;
align-items: center;
width: fit-content;
min-height: 38px;
padding: 0.48rem 0.86rem;
background: rgba(255, 255, 255, 0.82);
box-shadow: 0 14px 34px -28px rgba(23, 60, 49, 0.5);
}

.hero__copy--premium .hero__title {
max-width: none;
letter-spacing: 0;
}

.hero__lead--primary {
max-width: 58ch;
position: relative;
padding: clamp(0.92rem, 1.45vw, 1.16rem) clamp(1rem, 1.65vw, 1.35rem);
border: 1px solid rgba(47, 111, 82, 0.13);
border-left: 4px solid rgba(191, 145, 65, 0.68);
border-radius: 8px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(244, 251, 246, 0.68)),
rgba(255, 255, 255, 0.72);
box-shadow: 0 22px 52px -42px rgba(23, 60, 49, 0.5);
color: #365d4d;
font-family: var(--font-heading);
font-size: clamp(1.02rem, 1.12vw, 1.18rem);
font-weight: 500;
line-height: 1.68;
}

.hero__cta--premium {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.55rem;
}

.hero__cta--premium .btn {
justify-content: center;
width: fit-content;
max-width: 100%;
white-space: nowrap;
min-height: 34px;
padding-block: 0.3rem;
padding-inline: 0.75rem;
font-size: 0.875rem;
text-align: center;
box-shadow: 0 8px 18px -16px rgba(23, 60, 49, 0.28);
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.hero__cta--premium .btn:hover {
box-shadow: 0 12px 24px -16px rgba(47, 111, 82, 0.32);
}

.hero__cta--premium .btn:focus-visible {
box-shadow: var(--ring), 0 8px 18px -16px rgba(23, 60, 49, 0.28);
}

.hero__gentle {
display: grid;
gap: 0.28rem;
max-width: 58ch;
color: #486a5b;
}

.hero__gentle-kicker {
margin: 0;
color: var(--gold);
font: 700 0.72rem/1.2 var(--font-body);
letter-spacing: 0.04em;
text-transform: uppercase;
}

.hero__gentle p {
margin: 0;
font: 700 clamp(0.92rem, 0.98vw, 1.02rem)/1.64 var(--font-body);
}

.hero__gentle strong {
color: var(--ink-900);
font-family: var(--font-heading);
font-size: 1.08em;
font-weight: 600;
}

.hero__gentle a {
color: var(--sage-dk);
font-weight: 700;
text-decoration-color: rgba(47, 111, 82, 0.36);
text-decoration-thickness: 2px;
text-underline-offset: 0.18em;
white-space: nowrap;
}

.hero__gentle a:hover,
.hero__gentle a:focus-visible {
color: var(--gold);
outline: none;
}

.hero__suite {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.62rem;
}

.hero__suite-card {
position: relative;
display: grid;
gap: 0.26rem;
min-height: 116px;
padding: 0.78rem;
border: 1px solid rgba(47, 111, 82, 0.13);
border-radius: 8px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(242, 250, 244, 0.76)),
rgba(255, 255, 255, 0.74);
box-shadow: 0 20px 42px -34px rgba(23, 60, 49, 0.42);
color: #355d4c;
text-decoration: none;
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.hero__suite-card::after {
content: none;
position: absolute;
right: 0.78rem;
top: 0.78rem;
color: var(--sage-dk);
font-weight: 700;
opacity: 0.66;
}

.hero__suite-card:hover,
.hero__suite-card:focus-visible {
transform: translateY(-2px);
border-color: rgba(47, 111, 82, 0.28);
box-shadow: 0 24px 48px -34px rgba(23, 60, 49, 0.58);
outline: none;
}

.hero__suite-card span {
color: var(--gold);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}

.hero__suite-card strong {
color: var(--ink-900);
font-family: var(--font-heading);
font-size: 1.02rem;
line-height: 1.12;
}

.hero__suite-card small {
color: #526d62;
font: 700 0.78rem/1.36 var(--font-body);
}

.hero__copy--premium .hero__badges {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.48rem;
}

.hero__copy--premium .hero__badges li {
min-height: 82px;
padding: 0.72rem;
border-radius: 8px;
background: rgba(255, 255, 255, 0.72);
}

.hero__copy--premium .hero__badges span {
font-size: 1.32rem;
}

.hero__copy--premium .hero__trust {
gap: 0.42rem;
}

.hero__copy--premium .hero__trust span {
min-height: 30px;
padding: 0.32rem 0.58rem;
font-size: 0.76rem;
}

.hero__copy--premium .hero__feature {
display: flex;
width: 100%;
justify-content: flex-start;
padding: 0.72rem;
border-radius: 8px;
}

.hero__copy--premium .hero__feature-title {
font-size: 1.04rem;
}

.hero__copy--premium .hero__feature-sub {
font-size: 0.78rem;
}

.hero__aside {
display: grid;
gap: clamp(0.85rem, 1.5vw, 1.15rem);
}

.wv-head__summary {
max-width: none;
margin: 0.38rem auto 0;
color: #415e53;
font: 700 clamp(0.8rem, 0.92vw, 0.9rem)/1.35 var(--font-body);
white-space: nowrap;
text-wrap: balance;
letter-spacing: 0;
}

.hero__practice-list--cards {
gap: 0.46rem;
}

.hero__practice-list--cards li {
padding: 0;
}

.hero__practice-list--cards a {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.58rem;
align-items: start;
padding: 0.64rem;
border: 1px solid rgba(47, 111, 82, 0.12);
border-radius: 8px;
background: rgba(255, 255, 255, 0.66);
color: inherit;
text-decoration: none;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.hero__practice-list--cards a:hover,
.hero__practice-list--cards a:focus-visible {
transform: translateY(-2px);
border-color: rgba(47, 111, 82, 0.28);
background: rgba(255, 255, 255, 0.88);
outline: none;
}

.hero__practice-list--cards .hero__practice-ico {
position: static;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 28px;
padding: 0;
}

.hero__practice-list--cards small {
display: block;
margin-top: 0.16rem;
color: #5b7268;
font: 700 0.76rem/1.34 var(--font-body);
}

.hero__practice--reveal {
opacity: 0;
transform: translateY(28px) scale(0.985);
filter: blur(9px);
transition:
opacity 0.72s ease,
transform 0.72s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.72s ease;
}

.hero__practice--reveal.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}

.hero__practice--reveal.is-resetting {
transition: none;
}

.home-reality {
padding: clamp(1.2rem, 1.7vw, 1.6rem) clamp(1rem, 4vw, 2.5rem) clamp(2.35rem, 4.8vw, 4.4rem);
background: var(--yv-site-bg, #f9fdfb);
}

.home-reality__inner {
display: grid;
gap: clamp(1.05rem, 2.2vw, 1.75rem);
max-width: var(--maxw);
margin: 0 auto;
}

.home-reality__head {
display: grid;
gap: 0.72rem;
max-width: 820px;
margin: 0 auto;
text-align: center;
}

.home-reality__head .section__eyebrow,
.home-reality__head h2,
.home-reality__head p {
margin: 0;
}

.home-reality__head h2 {
color: var(--ink-900);
font-family: var(--font-heading);
font-size: clamp(1.7rem, 2.75vw, 2.65rem);
font-weight: 600;
line-height: 1.08;
}

.home-reality__head p {
max-width: 78ch;
margin-inline: auto;
color: #526d62;
font: 500 clamp(0.96rem, 1.02vw, 1.04rem)/1.68 var(--font-body);
}

.home-reality__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(0.74rem, 1.45vw, 1rem);
}

.home-reality__item {
display: grid;
grid-template-columns: minmax(158px, 0.44fr) minmax(0, 1fr);
min-height: 168px;
overflow: hidden;
border: 1px solid rgba(47, 111, 82, 0.12);
border-radius: 8px;
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 22px 50px -44px rgba(23, 60, 49, 0.48);
}

.home-reality__item img {
width: 100%;
height: 100%;
min-height: 168px;
object-fit: cover;
filter: saturate(0.98) contrast(0.99);
}

.home-reality__item div {
display: grid;
align-content: center;
gap: 0.38rem;
padding: clamp(0.86rem, 1.55vw, 1.18rem);
}

.home-reality__item h3,
.home-reality__item p {
margin: 0;
}

.home-reality__item h3 {
color: var(--ink-900);
font-family: var(--font-heading);
font-size: clamp(1.04rem, 1.22vw, 1.24rem);
font-weight: 600;
line-height: 1.14;
}

.home-reality__item p {
color: #587166;
font: 500 clamp(0.86rem, 0.93vw, 0.94rem)/1.54 var(--font-body);
}

@media (max-width: 1180px) {
.hero__suite {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 900px) {
.home-reality__grid {
grid-template-columns: 1fr;
}
}

@media (prefers-reduced-motion: reduce) {
.hero__practice--reveal {
transition: none;
filter: none;
}
}

@media (max-width: 760px) {
.hero__suite,
.hero__copy--premium .hero__badges {
grid-template-columns: 1fr;
}

.wv-head__summary {
white-space: normal;
}

.hero__suite-card {
min-height: 0;
}

.home-reality__item {
grid-template-columns: 1fr;
}

.home-reality__item img {
aspect-ratio: 16 / 9;
min-height: 0;
}
}

/* ---------- Shared non-heading copy typography ---------- */
:root {
--yv-copy-font: var(--font-body);
--yv-copy-color: #365d4d;
}

body :is(
p,
li,
dd,
dt,
figcaption,
label,
small,
blockquote,
div[class*="__lead"],
div[class*="__intro"],
div[class*="__text"],
div[class*="__desc"],
div[class*="__note"],
div[class*="__hint"],
div[class*="__sub"],
span[class*="__lead"],
span[class*="__intro"],
span[class*="__text"],
span[class*="__desc"],
span[class*="__note"],
span[class*="__hint"],
span[class*="__sub"]
):not(:is(
h1,
h2,
h3,
h4,
h5,
h6,
h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 *,
[class*="eyebrow"],
.yi-eye,
.nav *,
.fs-topnav *,
.nav-drop *,
.btn,
.btn *,
button,
button *,
input,
select,
textarea,
.topbar *,
.yv-intro *,
.hl-stage *,
.hl-panel *,
.hl-modal *,
.ai-video-modal *
)) {
font-family: var(--yv-copy-font) !important;
}

body :is(
p,
li,
dd,
dt,
figcaption,
label,
small,
blockquote,
div[class*="__lead"],
div[class*="__intro"],
div[class*="__text"],
div[class*="__desc"],
div[class*="__note"],
div[class*="__hint"],
div[class*="__sub"],
span[class*="__lead"],
span[class*="__intro"],
span[class*="__text"],
span[class*="__desc"],
span[class*="__note"],
span[class*="__hint"],
span[class*="__sub"]
):not(:is(
h1,
h2,
h3,
h4,
h5,
h6,
h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 *,
[class*="eyebrow"],
.yi-eye,
.nav *,
.fs-topnav *,
.nav-drop *,
.btn,
.btn *,
button,
button *,
input,
select,
textarea,
.topbar *,
.yv-intro *,
.foot *,
.yi-dark *,
.yi-quote *,
.ck-quote *,
.yn-quote *,
.ab-challenge *,
.ab-cta *,
.mu-hero *,
.pr-hero *,
.sn-hero *,
.md-hero *,
.yn-hero *,
.al-hero *,
.sc-page *,
.hl-stage *,
.hl-panel *,
.hl-modal *,
.ai-video-modal *
)) {
color: var(--yv-copy-color) !important;
}

body :is(p, li, dd, dt, figcaption, label, small, blockquote) :is(b, strong) {
font-family: inherit !important;
}

body :is(p, li, dd, dt, figcaption, label, small, blockquote):not(:is(
.foot *,
.yi-dark *,
.yi-quote *,
.ck-quote *,
.yn-quote *,
.ab-challenge *,
.ab-cta *,
.mu-hero *,
.pr-hero *,
.sn-hero *,
.md-hero *,
.yn-hero *,
.al-hero *,
.sc-page *,
.hl-stage *,
.hl-panel *,
.hl-modal *,
.ai-video-modal *
)) :is(b, strong) {
color: inherit !important;
}

/* ---------- Restore the homepage mobile dropdown panel's opaque
background, which the frameless-tabs rules above otherwise wipe out
at every width including mobile. Scoped to .nav__links only (the
homepage's own nav) so .fs-topnav__links -- the inline-wrapping
mobile nav used by every other page -- is completely unaffected. ---------- */
@media (max-width: 780px) {
.nav__links.yv-primary-tabs,
.nav__links.yv-split-tabs {
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(47, 111, 82, 0.14);
border-radius: 16px;
box-shadow: var(--shadow);
}
}

/* ---------- Typography system: one font for everything ----------
Headings share the body font (see css/fonts.css), so hierarchy comes from
size and weight. Page-specific heading rules used 600, which left some
headings lighter than bold lead paragraphs; keep h1-h3 at 700 everywhere. */
body :is(h1, h2, h3) {
font-weight: 700 !important;
}

body :is(h1, h2) {
letter-spacing: -0.01em;
}

/* Homepage hero: no CTA buttons; the intro box sits centred against the
   Alice and Kevin welcome videos (beside them on wide screens, above them
   when the layout stacks). */
.hero__copy--premium {
align-self: center;
align-content: center;
}
/* Side by side (wide screens): the box's top lines up with the top edge of
   the Alice and Kevin guide cards. */
@media (min-width: 1181px) {
.hero__copy--premium { align-self: start; }
}
@media (max-width: 1180px) {
.hero__copy--premium { justify-items: center; justify-self: stretch; width: 100%; max-width: none; }
.hero__copy--premium .hero__lead--primary {
margin-inline: auto;
text-align: center;
border-left-width: 1px;
border-top: 3px solid rgba(191, 145, 65, 0.68);
}
}

/* Larger menu tabs on wider screens (measured with the 4 | 6 split: these
   are the largest sizes that keep every label on one line). */
@media (min-width: 1366px) {
.nav__links.yv-split-tabs .nav__link,
.fs-topnav__links.yv-split-tabs .yv-nav-side > a,
.nav__links.yv-split-tabs .nav-drop__tab,
.fs-topnav__links.yv-split-tabs .nav-drop__tab,
.yv-split-tabs .nav-drop__tab {
font-size: 12px;
}
}
@media (min-width: 1440px) {
.nav__links.yv-split-tabs .nav__link,
.fs-topnav__links.yv-split-tabs .yv-nav-side > a,
.nav__links.yv-split-tabs .nav-drop__tab,
.fs-topnav__links.yv-split-tabs .nav-drop__tab,
.yv-split-tabs .nav-drop__tab {
font-size: 13px;
}
}
@media (min-width: 1536px) {
.nav__links.yv-split-tabs .nav__link,
.fs-topnav__links.yv-split-tabs .yv-nav-side > a,
.nav__links.yv-split-tabs .nav-drop__tab,
.fs-topnav__links.yv-split-tabs .nav-drop__tab,
.yv-split-tabs .nav-drop__tab {
font-size: 14px;
}
}
@media (min-width: 1920px) {
.nav__links.yv-split-tabs .nav__link,
.fs-topnav__links.yv-split-tabs .yv-nav-side > a,
.nav__links.yv-split-tabs .nav-drop__tab,
.fs-topnav__links.yv-split-tabs .nav-drop__tab,
.yv-split-tabs .nav-drop__tab {
font-size: 16px;
}
}

/* ---------- Phone header + menu (<= 780px only) ----------
One compact row on every page (small logo left, menu button right). The tabs
open as a solid list under it; a tab's caret expands its sub-sections in
place. Nothing here applies at 781px and wider, so desktop is unchanged. */
.yv-menu-btn {
display: none;
}

@media (max-width: 780px) {
.site-topgroup .fs-topnav,
.site-top .nav {
position: relative;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px;
min-height: 0 !important;
padding: 8px 16px !important;
}

.site-topgroup .fs-topnav__brand,
.site-top .nav__brand,
.site-top .nav__logo {
display: inline-flex;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}

.site-topgroup .fs-topnav__brand .yv-logo-img,
.site-top .nav__brand .yv-logo-img {
width: 56px !important;
height: 56px !important;
max-width: none !important;
}

.site-topgroup .yv-menu-btn,
.site-top .nav__toggle {
position: static !important;
display: inline-flex !important;
flex: 0 0 44px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 0;
background: rgba(58, 171, 116, 0.1);
border: 1px solid rgba(58, 171, 116, 0.28);
border-radius: 12px;
color: inherit;
cursor: pointer;
}

.site-topgroup .yv-menu-btn span {
display: block;
width: 20px;
height: 2px;
background: var(--ink-900, #1c3a28);
border-radius: 2px;
transition: transform 0.25s ease, opacity 0.25s ease;
}

.site-topgroup .yv-menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-topgroup .yv-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-topgroup .yv-menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The list */
.site-topgroup .fs-topnav__links.yv-split-tabs,
.site-top .nav__links.yv-split-tabs {
position: absolute !important;
top: calc(100% + 6px) !important;
left: 16px !important;
right: 16px !important;
z-index: 120;
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 2px !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
max-height: calc(100vh - var(--site-top-h, 72px) - 24px) !important;
margin: 0 !important;
padding: 8px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
background: #fff !important;
border: 1px solid rgba(47, 111, 82, 0.16) !important;
border-radius: 16px !important;
box-shadow: 0 24px 60px -28px rgba(23, 60, 49, 0.55) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(-6px) !important;
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s !important;
}

.site-topgroup .fs-topnav__links.yv-split-tabs.is-open,
.site-top .nav__links.yv-split-tabs.is-open {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
transition-delay: 0s !important;
}

.site-topgroup .fs-topnav__links .yv-nav-side,
.site-top .nav__links .yv-nav-side {
display: contents !important;
}

/* Rows keep their height; a long list scrolls instead of squashing */
.site-topgroup .fs-topnav__links .yv-nav-side > *,
.site-top .nav__links .yv-nav-side > * {
flex-shrink: 0 !important;
}

/* Rows: full width, 48px tall, 16px text */
.site-topgroup .fs-topnav__links .yv-nav-side > a,
.site-topgroup .fs-topnav__links .nav-drop__tab,
.site-topgroup .fs-topnav__links .yv-account-login,
.site-top .nav__links .nav__link,
.site-top .nav__links .nav-drop__tab {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
min-height: 48px !important;
margin: 0 !important;
padding: 10px 14px !important;
font-size: 16px !important;
line-height: 1.25 !important;
text-align: left !important;
white-space: normal !important;
border-radius: 10px !important;
box-sizing: border-box;
}

.site-top .nav__links .nav__link::after {
display: none !important;
}

.site-top .nav__links .nav__link.is-active {
background: rgba(58, 171, 116, 0.12) !important;
}

.site-topgroup .fs-topnav__links .nav-drop,
.site-top .nav__links .nav-drop {
position: static !important;
display: block !important;
width: 100% !important;
}

.site-topgroup .fs-topnav__links .nav-drop::after,
.site-top .nav__links .nav-drop::after {
display: none !important;
}

.site-topgroup .fs-topnav__links .nav-drop__caret,
.site-top .nav__links .nav-drop__caret {
display: inline-flex !important;
flex: 0 0 44px;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: -10px -14px -10px 8px !important;
font-size: 14px !important;
opacity: 0.75;
pointer-events: auto !important;
cursor: pointer;
transform: none !important;
transition: transform 0.2s ease !important;
}

.site-topgroup .fs-topnav__links .nav-drop.is-expanded .nav-drop__caret,
.site-top .nav__links .nav-drop.is-expanded .nav-drop__caret {
transform: rotate(180deg) !important;
}

/* Sub-sections: hidden until the caret is tapped (no hover on phones) */
.site-topgroup .fs-topnav__links .nav-drop .nav-drop__panel,
.site-top .nav__links .nav-drop .nav-drop__panel {
position: static !important;
display: none !important;
left: auto !important;
right: auto !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 0 4px !important;
padding: 0 0 0 12px !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}

.site-topgroup .fs-topnav__links .nav-drop.is-expanded > .nav-drop__panel,
.site-top .nav__links .nav-drop.is-expanded > .nav-drop__panel {
display: grid !important;
}

.site-topgroup .fs-topnav__links .nav-drop__panel::before,
.site-top .nav__links .nav-drop__panel::before {
display: none !important;
}

.site-topgroup .fs-topnav__links .nav-drop__panel a,
.site-top .nav__links .nav-drop__panel a {
display: flex !important;
align-items: center;
min-height: 44px;
padding: 8px 14px !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
white-space: normal !important;
border-radius: 8px;
}

/* Account (signed in) sits in the list; its panel opens inline */
.site-topgroup .fs-topnav__links .yv-account-nav,
.site-top .nav__links .yv-account-nav {
display: block !important;
width: 100% !important;
}

.site-topgroup .fs-topnav__links .yv-account-button,
.site-top .nav__links .yv-account-button {
width: 100%;
min-height: 48px;
justify-content: flex-start;
}

.site-topgroup .fs-topnav__links .yv-account-name,
.site-top .nav__links .yv-account-name {
max-width: none !important;
}

.site-topgroup .fs-topnav__links .yv-account-panel,
.site-top .nav__links .yv-account-panel {
position: static !important;
left: auto !important;
right: auto !important;
width: auto !important;
margin-top: 6px;
transform: none !important;
box-shadow: none !important;
}

/* Room under the last content so the floating chat button never covers it */
.yv-brand-footer::after {
content: "";
display: block;
height: 76px;
}

/* iPhone Safari zooms into any field under 16px; keep them at 16px */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]),
select,
textarea {
font-size: 16px !important;
}

/* Minimum 12px for small labels on phones */
.ab-hero__eyebrow, .ab-eyebrow,
.ct-hero__eyebrow, .ct-aside__eyebrow,
.gm-eyebrow,
.al-card__lvl, .al-ak-dialog__eyebrow,
.sn-eyebrow, .sn-flow-player__kicker, .sn-step__breath, .sn-flow-dot, .sn-var__tag,
.pr-eyebrow, .pr-tech__tag,
.md-eyebrow,
.mu-hero__eyebrow, .mu-eyebrow, .mu-card__tag,
.pl-note, .pl-card__badge, .pl-hint, .pl-form__legal,
.hl-voicepick__label, .hl-startwrap__btn, .hl-mode-chip, .hl-ref__cap, .hl-ref__expand,
.hl-arow__tgt, .hl-cc, .hl-panel__label,
.yi-card__num,
.auth-tag {
font-size: 12px !important;
}

/* A-Z library: bigger taps on the small card controls */
.al-card__wiki {
min-height: 40px !important;
}

.al-human-mini__view,
.al-player-btn,
.al-hero-down {
min-width: 40px !important;
min-height: 40px !important;
}

.al-lvl {
min-height: 40px !important;
}
}

/* ---------- Top menu: spread each side evenly (2026-10-04) ----------
Home sits at the far left, "Sign Up as Teacher" at the far right, and the
tabs on each side of the logo are spaced evenly. Long labels may take two
balanced lines rather than squeezing; no label is shortened or hidden. */
@media (min-width: 781px) {
.yv-split-tabs .yv-nav-side.yv-nav-side--left,
.yv-split-tabs .yv-nav-side.yv-nav-side--right {
justify-content: space-between;
column-gap: 10px;
}
.yv-split-tabs .yv-nav-side > a,
.yv-split-tabs .yv-nav-side .nav-drop__tab {
text-wrap: balance;
}
}
@media (min-width: 1241px) {
.site-topgroup .fs-topnav,
.site-top .nav {
padding-left: 16px;
padding-right: 16px;
}
}

/* Homepage "Follow us" under the intro box: heading and the same four logos
   as the About page, in their own brand colours, with no card around them. */
.hm-follow {
width: 100%;
max-width: 58ch; /* same width as the intro box (same font size, same measure) */
font-family: var(--font-heading);
font-size: clamp(1.02rem, 1.12vw, 1.18rem);
font-weight: 500;
padding: 0;
text-align: center;
}
.hm-follow h2 {
margin: 0 0 0.6rem;
font-family: var(--font-heading);
font-size: clamp(1.15rem, 1.5vw, 1.35rem);
line-height: 1.2;
color: var(--ink-900);
}
.hm-social {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.9rem;
}
.hm-social__link {
width: 48px;
height: 48px;
display: inline-grid;
place-items: center;
border-radius: 12px;
transition: transform 180ms ease;
}
.hm-social__link:hover { transform: translateY(-2px) scale(1.05); }
.hm-social__link:focus-visible { outline: 3px solid rgba(61, 153, 112, 0.7); outline-offset: 3px; }
.hm-social__link svg { display: block; }
@media (max-width: 1180px) {
.hero__copy--premium .hm-follow { margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
.hm-social__link { transition: none; }
}

/* ============================================================
   Header 2026-10-15: logo on the left, tabs on the right
   (header-layout-prompt.md). Same tabs, links and menus; only the
   arrangement, the warm tints and the menu keyboard support change.
   ============================================================ */

/* ---------- Colours (every width): no gold / cream tints ---------- */
.site-top,
.site-topgroup {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 253, 249, 0.94));
}
.site-top .nav::after,
.site-topgroup .fs-topnav::after {
background: linear-gradient(90deg, transparent, rgba(47, 111, 82, 0.2), rgba(47, 111, 82, 0.16), transparent);
}
/* the cream patch was a stopgap for the old white-background JPEG logo */
.site-top .nav__brand::before,
.site-topgroup .fs-topnav__brand::before {
content: none;
display: none;
}
.site-top .nav-drop__panel::before,
.site-topgroup .nav-drop__panel::before {
background: linear-gradient(90deg, rgb(114, 169, 130), rgb(61, 153, 112));
}
.hero__guides .wv-frame__titlebar {
background: #f4faf6;
}
.hero__lead--primary {
border-left-color: rgba(61, 153, 112, 0.6);
}
/* The box around the Alice and Kevin cards clips to its rounded corners; at
   16px it shaved the cards' 1px border where a card sits in its corner.
   Matching the cards' own 14px keeps the green line all the way round. */
.hero__guides {
border-radius: 14px;
}
@media (max-width: 1180px) {
.hero__copy--premium .hero__lead--primary {
border-top-color: rgba(61, 153, 112, 0.6);
}
}

/* ---------- Layout (wide screens): logo left, one row of tabs right ---------- */
@media (min-width: 1181px) {
.site-top .nav,
.site-topgroup .fs-topnav {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
column-gap: clamp(1rem, 2vw, 2.5rem) !important;
width: 100% !important;
max-width: 1760px !important;
margin: 0 auto !important;
padding: 0.5rem clamp(1rem, 2.4vw, 2.5rem) !important;
box-sizing: border-box;
}
.site-top .nav__brand,
.site-topgroup .fs-topnav__brand {
grid-area: auto !important;
order: 0;
flex: 0 0 auto;
width: auto !important;
max-width: none !important;
margin: 0 !important;
justify-self: auto;
justify-content: flex-start !important;
transform: none !important;
}
.site-top .nav__logo,
.site-top .nav__brand .yv-logo-img,
.site-topgroup .fs-topnav__brand .yv-logo-img {
width: 72px !important;
height: 72px !important;
}
.site-top .nav__links.yv-split-tabs,
.site-topgroup .fs-topnav__links.yv-split-tabs {
order: 1;
flex: 1 1 auto;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
/* the tabs share the whole row evenly, from just after the logo to the
   right edge; the gap below is the minimum between two tabs */
justify-content: space-between !important;
gap: clamp(0.2rem, 0.6vw, 0.6rem) !important;
width: auto !important;
min-width: 0 !important;
grid-template-columns: none !important;
}
/* both tab groups share the container's single gap */
.site-top .nav__links .yv-nav-side,
.site-topgroup .fs-topnav__links .yv-nav-side {
display: contents !important;
}
.site-top .nav__links .yv-nav-side > *,
.site-topgroup .fs-topnav__links .yv-nav-side > * {
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
}
}

/* ---------- Menus: dismissed with Escape (desktop and tablet) ---------- */
@media (min-width: 781px) {
/* scoped to the header so it outranks the hover/focus-within "open" rules
   in ux.css, which load after this file */
.site-top .nav-drop.is-dismissed > .nav-drop__panel,
.site-topgroup .nav-drop.is-dismissed > .nav-drop__panel {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
/* hide at once: a fading panel stays focusable until the fade ends, so a
   quick Tab after Escape would land on a link that then disappears */
transition: none !important;
}
.site-top .nav-drop.is-dismissed .nav-drop__caret,
.site-topgroup .nav-drop.is-dismissed .nav-drop__caret {
transform: none !important;
}
/* the phone section button exists only on phones */
.nav-drop__toggle {
display: none !important;
}
}

/* ---------- Phones: the caret is a real button after the tab link ---------- */
.nav-drop__toggle {
display: none;
}
@media (max-width: 780px) {
.site-topgroup .fs-topnav__links .nav-drop,
.site-top .nav__links .nav-drop {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 44px;
align-items: center;
}
.site-topgroup .fs-topnav__links .nav-drop > .nav-drop__panel,
.site-top .nav__links .nav-drop > .nav-drop__panel {
grid-column: 1 / -1;
}
/* the decorative caret inside the link gives way to the button */
.site-topgroup .fs-topnav__links .nav-drop__tab .nav-drop__caret,
.site-top .nav__links .nav-drop__tab .nav-drop__caret {
display: none !important;
}
.site-topgroup .fs-topnav__links .nav-drop__toggle,
.site-top .nav__links .nav-drop__toggle {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: 0;
padding: 0;
border: 0;
border-radius: 10px;
background: transparent;
color: inherit;
font: inherit;
font-size: 14px;
cursor: pointer;
}
.site-topgroup .fs-topnav__links .nav-drop__toggle span,
.site-top .nav__links .nav-drop__toggle span {
display: inline-block;
opacity: 0.75;
transition: transform 0.2s ease;
}
.site-topgroup .fs-topnav__links .nav-drop__toggle[aria-expanded="true"] span,
.site-top .nav__links .nav-drop__toggle[aria-expanded="true"] span {
transform: rotate(180deg);
}
.site-topgroup .fs-topnav__links .nav-drop__toggle:focus-visible,
.site-top .nav__links .nav-drop__toggle:focus-visible {
outline: 3px solid rgba(61, 153, 112, 0.7);
outline-offset: -3px;
}
}
@media (prefers-reduced-motion: reduce) {
.nav-drop__toggle span { transition: none !important; }
}