/* Any viewport */
.page-header {
	position: relative;
}

.site-logo {
	width: 130px;
	margin: 0 auto;
	padding: 1rem 0 1.5rem;
	text-align: center;
}

.site-logo img{
	width: 100%;
}

.navbar-toggler {
	background: red;
}

.menu-icon {
	width: 32px;
}

.vocal-range-caller {
	font-size: 0.9rem;
}

.vocal-range-caller--range {
	font-weight: bold;
}

.page-footer {
	padding: 1.4rem;
	background: #232323;
}

.page-footer,
.page-footer a {
	color: #fff;
}

.page-footer-title {
	padding-bottom: 1.4rem;
}

.page-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.9rem;
}

.page-footer-links li {
	margin-bottom: 0.4rem;
}

.home-hero {
	padding: 3rem;
	background: #FF9126;
	text-align: center;
	color: #fff;
}

.content-bounds {
	max-width: 1200px;
	margin: 0 auto;
}

.page-sections-group {
	padding: 0;
}

.page-section {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.page-section--alt {
	background: #F6F6F6;
}

.page-section p {
	margin-bottom: 1.2rem;
}

.illustration-area {
	padding-bottom: 1.4rem;
	text-align: center;
}

.illustration {
	max-width: 100%;
}

.page-section .list-group-item {
	background: transparent;
}

.bg-space {
    background: rgb(25,25,112); /* Midnight blue */
    background: linear-gradient(90deg, rgba(25,25,112,1) 0%, rgba(72,61,139,1) 50%, rgba(138,43,226,1) 100%); /* Transition from midnight blue to dark slate blue to blue violet */
    color: #FFF;
}

.text-carrot {
    color: #FF9126;
}

.text-blood {
    color: #c33c22
}

.text-gold {
    background-image: linear-gradient(
        to right,
        #462523 0,
            #cb9b51 22%,
        #f6e27a 45%,
        #f6f2c0 50%,
        #f6e27a 55%,
        #cb9b51 78%,
        #462523 100%
	);
   color:transparent;
}


.text-pink {
    color: #f2b7bd;
}

.text-beige {
    color: #FEF8EA;
}


.bg-beige {
    background:#FEF8EA;
}

.btn-gold-light {
    /* Background color for the container */
    background-color: #fff;

    /* Position to center for demo purposes */
    margin: 50px auto;

    /* Add a border with a gradient color */
    border: 2px solid;
    border-image-slice: 1;
    border-width: 2px;
    border-image-source: linear-gradient(94.09deg, #FFD843 0%, #FF9126 83.75%);
    overflow: hidden; /* Ensure the background matches the rounded border */
}

.btn-gold-light:hover {
    background: #FFFBEC;
    cursor: pointer;
}


.btn-gold {
    background-image-source: linear-gradient(94.09deg, #FFD843 0%, #FF9126 83.75%);
    color: #fff;
}

.btn-gold:hover {
    background: #FFFBEC;
    color: #000;
    cursor: pointer;
}




.bg-carrot {
    background: #FF9126;
}

.bg-pink {
    background:#f2b7bd;
}

.text-gray {
    color: #A1A8AD;
}

.bg-gray {
    background: #A1A8AD;
}


.cut-text {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display:inline;
    width:100px !important;
}

.btn-carrot {
    background-color:#FF9126;
    color:#fff;
}



/* Medium devices (exclude tablets, 768px and up) */
@media only screen and (max-width: 767px) {
	.navbar-toggler,
	.navbar,
	.navbar-nav {
		position: absolute;
		top: 0;
		left: 0;
	}

	.navbar-toggler {
		z-index: 40;
		margin-top: 0.5rem;
		border: none;
		background: transparent;
	}

	.navbar-toggler:focus {
		outline: none;
		opacity: 0.3;
	}

	.navbar-nav {
		z-index: 35;
		display: block;
		width: 300px;
		padding: 3.5rem 1rem 1rem;
		background: #fff;
		box-shadow: 0 4px 4px rgba(0,0,0,0.3);
		border-radius: 0 0 6px 0;
	}

	.secondary-nav {
		display: block;
	}

	/* Auth-area section break in mobile drawer.
	   Putting top+bottom rules on every .nav-item--login produced duplicate
	   hairlines between adjacent login items (Sign Up + Log in). One hairline
	   above the first login item, one above the next non-login sibling
	   (About) is enough to close the section cleanly. */
	.nav-item--login {
		padding: 0.75rem 0;
		margin: 0;
		border: 0;
		border-top: 1px solid var(--sc-rule-soft);
	}
	.nav-item--login + .nav-item--login {
		border-top: 0;
		padding-top: 0;
	}
	.nav-item--login + .nav-item:not(.nav-item--login) {
		border-top: 1px solid var(--sc-rule-soft);
		padding-top: 0.75rem;
		margin-top: 0.25rem;
	}

	.vocal-range-caller {
		padding: 8px;
		background: #F6F6F6;
		border-top: 1px solid #E2E2E2;
		border-bottom: 1px solid #E2E2E2;
		text-align: center;
	}

	.page-footer-links--primary {
		margin-bottom: 1rem;
		padding-bottom: 1rem;
		border-bottom: 1px solid rgba(255,255,255,0.3);
	}

	#extension-link, #pitch-test-banner, #menu-link-voice-analyser {
	    float: left !important;
	}

    .page-section-title {
        text-align: center;
    }

	.page-section-buttons {
		text-align: center;
	}

	.page-section-buttons .btn {
		margin-bottom: 0.2rem;
	}

	.illustration {
		max-width: 70%;
	}

	/* no border on mobile menu for dropdowns */
	.dropdown-menu {
	    border:0;
	}

}

@media only screen and (min-width: 768px) {
	.page-header {
		border-bottom: 1px solid #E2E2E2;
	}

  	.site-logo {
  		margin: 0;
		padding: 1.2rem 0 0.5rem 1.5rem;
	}

	.nav-link.active {
		color: #333;
		font-weight: bold;
	}

	.secondary-nav {
		display: block;
		position: absolute;
		top: -5rem;
		right: 1rem;
		font-size: 0.8rem;
	}

	.secondary-nav li {
		float: right;
	}

	.vocal-range-caller {
		position: absolute;
		top: 1.6rem;
		left: 9.5rem;
		padding: 1rem 1.4rem;
		border-left: 1px solid #E2E2E2;
	}
}

/* desktop */
@media only screen and (min-width: 992px) {
	.illustration {
		max-width: 70%;
	}

	#div-footer-share {
	    display:none;
	}

	#quote-footer-share {
	    display:none;
	}

	#div-artist-search-form {
	    width:730px;
	}

    #p-buttons-bottom-mobile {
        display:none;
    }

    #p-buttons-top-mobile {
        display:none;
    }

    .illustration-big {
        max-width: 100%;
    }

    /* Make bootstrap dropdoown menu work on hover on desktop */
    .navbar .nav-item .dropdown-menu{ display: none; }
    .navbar .nav-item:hover .nav-link{   }
    .navbar .nav-item:hover .dropdown-menu{ display: block; }
    .navbar .nav-item .dropdown-menu{ margin-top:0; }

}

/* mobile */
@media only screen and (max-width: 992px) {

    #div-share-buttons {
        display:none;
    }

    #div-survey-who1 {
        // display:none;
    }

    #p-buttons-bottom-desktop {
        display:none;
    }

    #p-buttons-top-desktop {
        display:none;
    }

    .illustration-big {
        max-width: 100%;
    }

}

/* share buttons */
.a2a_menu, .a2a_menu_find_container, .a2a_svg {
    border-radius: 0 !important;
}

/* survey */
.survey-bubble {
	position: relative;
	background: #fff;
	border-radius: .4em;
}

.survey-bubble:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 74%;
	width: 0;
	height: 0;
	border: 39px solid transparent;
	border-top-color: #fff;
	border-bottom: 0;
	border-right: 0;
    margin-left: -17.5px;
	margin-bottom: -35px;
}

.survey-wrapper {
    position:fixed;
    right:0px;
    z-index:2;
    bottom:0px;
}

/* warm-ups controls*/

.seq-1 {
    min-width: 61px;
}

.dumbbell-container {
    margin-top:0px;
}

@media only screen and (min-width: 768px) {
    .dumbbell-container {
        margin-top:24px;
    }
}

@media only screen and (min-width: 1006px) {
    .dumbbell-container {
        margin-top:0px;
    }
}

/* animations */
.speech-bubble-bounce {
    -webkit-animation: speech-bubble-bounce-frames 3s linear forwards;
    animation: speech-bubble-bounce-frames 3s linear forwards;
}

@-webkit-keyframes speech-bubble-bounce-frames {
  0% {
        background:#fbe4ad;
  }
  50% {
        /* background:#79DF91; */
        background:#FF9126;
  }
  100% {
        background:#fbe4ad;
  }
}

@keyframes speech-bubble-bounce-frames {
  0% {
        background:#fbe4ad;
  }
  50% {
        /* background:#79DF91; */
        background:#FF9126;
  }
  100% {
        background:#fbe4ad;
  }
}

.speech-bubble {
    border-width:2px;
    border-style:solid;
    border-color:#fbe4ad;
}

.text-dashed {
    text-decoration:underline;text-decoration-style: dashed;
}

.collapse-link {
    text-decoration:underline;
    text-decoration-style:dashed;
    color: #FF9126;
}

.blink-me {
  animation: blinker 2s linear infinite;
}

/* Ambassador Landing Page Styles */

/* Hero section updates */
#hero .sub-headline {
    font-size: 1.2rem;
    margin-top: 1rem;
    opacity: 0.95;
}

#hero .price-badge {
    display: inline-block;
    padding: 0.75rem 2rem;
    margin-top: 1.5rem;
    background: linear-gradient(135deg, #FF9126 0%, #FFB366 100%);
    border-radius: 50px;
    font-size: 1.3rem;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(255, 145, 38, 0.3);
}

#hero .price-badge .crossed-price {
    text-decoration: line-through;
    opacity: 0.7;
    font-weight: normal;
    margin-right: 0.5rem;
    font-size: 1.1rem;
}

/* Comparison table */
.comparison-table {
    width: 100%;
    margin: 2rem auto;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
}

.comparison-table caption {
    padding: 1rem;
    font-size: 0.9rem;
    color: #666;
}

.comparison-table th,
.comparison-table td {
    padding: 1.2rem;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.comparison-table th {
    background: #f8f9fa;
    font-weight: bold;
}

.comparison-table th .comparison-logo {
    width: 80px;
    height: auto;
    display: block;
    margin: 0 auto 0.5rem;
}

.comparison-table th .price {
    font-size: 1.4rem;
    color: #333;
    margin-top: 0.5rem;
}

.comparison-table tbody tr:hover {
    background: #f8f9fa;
}

.comparison-table tbody tr:last-child td {
    border-bottom: none;
}

/* Mobile comparison cards */
@media (max-width: 640px) {
    .comparison-table {
        display: block;
    }
    
    .comparison-table thead,
    .comparison-table tbody,
    .comparison-table th,
    .comparison-table td,
    .comparison-table tr {
        display: block;
    }
    
    .comparison-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    .comparison-table tbody tr {
        margin-bottom: 1rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 1rem;
    }
    
    .comparison-table td {
        border: none;
        padding: 0.5rem 0;
        text-align: left;
        position: relative;
        padding-left: 50%;
    }
    
    .comparison-table td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        padding-left: 1rem;
        font-weight: bold;
        text-align: left;
    }
}

/* Benefit cards */
.benefit-cards {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    padding: 0;
    margin: 2rem 0;
}

.benefit-card {
    padding: 1.5rem;
    background: white;
    border: 1px solid #eee;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.benefit-card:hover {
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.benefit-card i {
    font-size: 1.5rem;
}

/* How It Works Timeline */
.timeline-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 3rem 0;
    position: relative;
}

.timeline-steps::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 15%;
    right: 15%;
    height: 2px;
    background: #ddd;
    z-index: 0;
}

.timeline-step {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 1;
}

.timeline-step .step-number {
    width: 60px;
    height: 60px;
    background: #FF9126;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(255, 145, 38, 0.3);
}

.timeline-step h4 {
    font-size: 1.1rem;
    margin: 0;
}

@media (max-width: 768px) {
    .timeline-steps {
        flex-direction: column;
        gap: 2rem;
    }
    
    .timeline-steps::before {
        top: 0;
        bottom: 0;
        left: 30px;
        right: auto;
        width: 2px;
        height: auto;
    }
    
    .timeline-step {
        display: flex;
        align-items: center;
        text-align: left;
        width: 100%;
    }
    
    .timeline-step .step-number {
        margin: 0 1rem 0 0;
    }
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .benefit-cards {
        grid-template-columns: 1fr;
    }
    
    #hero .price-badge {
        font-size: 1.1rem;
        padding: 0.5rem 1.5rem;
    }
}

/* Performance optimizations */
img[loading="lazy"] {
    background: #f0f0f0;
}

/* Accessibility improvements */
.comparison-table caption {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

@media (prefers-reduced-motion: reduce) {
    .benefit-card,
    .timeline-step {
        transition: none;
    }
}

/* Testimonials Section */
.testimonials-section {
    background: #f8f9fa;
}

.trustpilot-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.trustpilot-score .stars {
    display: flex;
    gap: 2px;
}

.trustpilot-logo {
    filter: grayscale(20%);
}

.success-stats .stat-item h4 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.success-stats .stat-item p {
    color: #666;
    margin: 0;
}

.testimonials-grid .testimonial-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonials-grid .testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.testimonials-grid .testimonial-card .stars {
    display: flex;
    gap: 2px;
    margin-bottom: 1rem;
}

.testimonials-grid .testimonial-card h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
}

.testimonials-grid .testimonial-card .testimonial-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 1.5rem;
}

.testimonials-grid .testimonial-card .testimonial-author {
    font-size: 0.9rem;
    color: #666;
    border-top: 1px solid #eee;
    padding-top: 1rem;
}

.video-testimonial .video-quote {
    max-width: 600px;
    margin: 0 auto;
}

.video-testimonial .video-quote p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #444;
}

.video-testimonial .author {
    color: #666;
}

@media (max-width: 768px) {
    .trustpilot-score {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .success-stats .stat-item h4 {
        font-size: 2rem;
    }
    
    .success-stats .row {
        justify-content: center;
    }
    
    .testimonials-grid .testimonial-card {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .video-testimonial .video-quote {
        padding: 2rem 1.5rem;
    }
}

.ai-coach-bubble {
    background: #f0f4ff;
    border-radius: 16px 16px 16px 4px;
    padding: 12px 16px;
    max-width: 80%;
    display: inline-block;
    line-height: 1.5;
}
@media (max-width: 767px) {
    .ai-coach-bubble { max-width: 100%; }
}
.typing-bubble { padding: 12px 20px; }
.typing-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #999;
    margin: 0 2px;
    animation: typingPulse 1.2s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingPulse {
    0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
    30% { opacity: 1; transform: scale(1); }
}

/* ─────────────────────────────────────────────────────────────
   Main nav · new-era restyle
   Black links, visible hover, orange active, modern caret + focus,
   Sign Up promoted to a filled CTA, hairline between utility & main rows.
   CSS only - markup unchanged.

   Chrome typography is era-aware via --sc-menu-font:
   · default body (legacy pages) → system-ui (matches the page below)
   · body.sc-canon-page (mission.html, future migrated pages) → Poppins
   Buttons (Sign Up, Plan Upgrade) stay on Poppins always - they are
   canonical-stamp CTAs whose font choice is part of the button identity,
   not chrome typography that should chameleon to the page.
   ───────────────────────────────────────────────────────────── */
body { --sc-menu-font: var(--sc-font-body); }
body.sc-canon-page { --sc-menu-font: var(--sc-font-display); }

/* Top-level links */
#main-nav .nav-link,
#main-nav .nav-link.text-secondary,
#main-nav .dropdown-toggle {
  color: var(--sc-ink);
  border-radius: var(--sc-r-sm);
  transition: background-color .15s ease, color .15s ease;
  text-decoration: none;
  font-family: var(--sc-menu-font);
}
/* Hover bg only on hover-capable input devices (mouse/trackpad).
   On touch, :hover sticks after tap and would leave the last-tapped
   dropdown trigger highlighted gray. The chevron flip + open dropdown
   already signal the open state, so touch doesn't need the bg pill. */
@media (hover: hover) {
  #main-nav .nav-link:hover,
  #main-nav .nav-link.text-secondary:hover,
  #main-nav .dropdown-toggle:hover {
    background-color: var(--sc-rule-soft);
    color: var(--sc-ink);
    text-decoration: none;
  }
  #main-nav .nav-link.active:hover,
  #main-nav .dropdown-toggle.active:hover {
    color: var(--sc-carrot);
    background-color: var(--sc-rule-soft);
  }
}
/* Use :focus-visible (not :focus) so iOS Safari doesn't leave a tapped
   <a href="#"> dropdown trigger highlighted gray until the user taps
   elsewhere. The dedicated :focus-visible outline below handles keyboard
   nav; this rule only paints the bg pill on real keyboard focus. */
#main-nav .nav-link:focus-visible,
#main-nav .dropdown-toggle:focus-visible {
  background-color: var(--sc-rule-soft);
  color: var(--sc-ink);
  text-decoration: none;
}
#main-nav .nav-link.active,
#main-nav .dropdown-toggle.active {
  color: var(--sc-carrot);
  font-weight: var(--sc-w-semibold);
  background-color: transparent;
}
/* Bootstrap's .text-secondary uses !important on color - explicit override */
#main-nav .nav-link.text-secondary { color: var(--sc-ink) !important; }
#main-nav .nav-link.text-secondary:hover { color: var(--sc-ink) !important; }

/* Dropdown items - covers items inside .dropdown-menu AND top-level
   nav-items that piggyback the .dropdown-item class (e.g., "My Lesson Recordings"). */
#main-nav .dropdown-item.text-primary,
#main-nav .dropdown-item.main-menu-link {
  color: var(--sc-ink) !important;
  text-decoration: none;
  font-family: var(--sc-menu-font);
  transition: background-color .15s ease, color .15s ease;
}
@media (hover: hover) {
  #main-nav .dropdown-item.text-primary:hover,
  #main-nav .dropdown-item.main-menu-link:hover {
    background-color: var(--sc-rule-soft);
    color: var(--sc-ink) !important;
    text-decoration: none;
  }
  #main-nav .dropdown-item.text-dark:hover {
    color: var(--sc-carrot) !important;
    background-color: var(--sc-rule-soft);
  }
}
/* Keyboard focus: paint bg pill only on real keyboard focus (:focus-visible),
   never on a stale tap. Dropdown items inside .dropdown-menu are <a href> too,
   so the same iOS-Safari sticky-focus regression applies to them. */
#main-nav .dropdown-item.text-primary:focus-visible,
#main-nav .dropdown-item.main-menu-link:focus-visible {
  background-color: var(--sc-rule-soft);
  color: var(--sc-ink) !important;
  text-decoration: none;
}
#main-nav .dropdown-item.text-dark {
  color: var(--sc-carrot) !important;
  font-weight: var(--sc-w-semibold);
}
#main-nav .dropdown-item.text-dark:focus-visible {
  color: var(--sc-carrot) !important;
  background-color: var(--sc-rule-soft);
}

/* Modern dropdown caret - replace Bootstrap's blunt triangle with a thin chevron
   that flips on hover (the dropdown opens on hover via existing CSS). */
#main-nav .dropdown-toggle::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  border-top: 0;
  border-left: 0;
  margin-left: 0.5em;
  vertical-align: 2px;
  transform: rotate(45deg);
  transition: transform .15s ease;
}
#main-nav .nav-item:hover > .dropdown-toggle::after,
#main-nav .dropdown-toggle[aria-expanded="true"]::after {
  transform: translateY(-2px) rotate(-135deg);
}

/* Desktop only: switch the utility row from `float: right` to flex so siblings
   vertically center against the Sign Up button.
   `row-reverse` preserves the visual order Blog→Mission→Contact→About→Log in→Sign Up
   that the legacy float-right cascade produced from the same markup.
   Wrapped in min-width:768px so the mobile drawer keeps its legacy stacked
   block layout (with the login items' top/bottom hairlines intact). */
@media only screen and (min-width: 768px) {
  .secondary-nav {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--sc-rule-soft);
    padding-bottom: 0.35rem;
  }
  .secondary-nav li { float: none; }
  .secondary-nav .nav-item--login { padding: 0; margin: 0; border: 0; }
}

/* Sign Up: canonical .btn--primary (gradient gold→carrot, brand shadow,
   semibold Poppins, 8px radius, 1.5px transparent border with border-box
   background-clip to avoid the gradient seam). Sized as .btn--sm to fit
   the inline nav row. */
#main-nav #signupBtn,
.secondary-nav #signupBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border: 1.5px solid transparent;
  border-radius: var(--sc-r-sm);
  background: var(--sc-grad-brand);
  background-origin: border-box;
  background-clip: border-box;
  color: #fff !important;          /* override inline style="color:#FF9126" */
  font: var(--sc-w-semibold) 13px/1 var(--sc-font-display);
  box-shadow: var(--sc-shadow-brand);
  transition: filter .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
#main-nav #signupBtn:hover,
#main-nav #signupBtn:focus,
.secondary-nav #signupBtn:hover,
.secondary-nav #signupBtn:focus {
  filter: brightness(1.06);
  background: var(--sc-grad-brand);
  background-origin: border-box;
  background-clip: border-box;
  color: #fff !important;
  text-decoration: none;
}
#main-nav #signupBtn:active,
.secondary-nav #signupBtn:active { transform: scale(0.98); }

/* Plan Upgrade CTA - canonical .btn--secondary (carrot outline, transparent
   fill, carrot label). Semantically different from Sign Up: this is an
   upsell to an already-authenticated user, not a primary new-user
   conversion, so it should NOT compete visually with .btn--primary in the
   chrome. The outline treatment reads as "available, not urgent" and
   keeps the gradient pill reserved for the loudest CTA on the surface.

   The hardcoded .active class on this anchor is a legacy styling hack
   (not a current-page marker), so we override the generic
   #main-nav .nav-link.active rule that would otherwise produce a bare
   orange-text ghost. Covers both desktop (#menu-link-pro) and the mobile
   drawer variant (#menu-link-pro-mob, which adds .text-success). */
#main-nav #menu-link-pro,
#main-nav #menu-link-pro.active,
#main-nav #menu-link-pro-mob,
#main-nav #menu-link-pro-mob.active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  /* Beat Bootstrap's .py-1 utility (uses !important on padding-y) so the
     button matches sibling chrome heights instead of being squashed. */
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  border: 1.5px solid var(--sc-carrot);
  border-radius: var(--sc-r-sm);
  background: transparent;
  color: var(--sc-carrot) !important;
  font: var(--sc-w-semibold) 13px/1 var(--sc-font-display);
  box-shadow: none;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
  white-space: nowrap;
  text-decoration: none;
}
#main-nav #menu-link-pro:hover,
#main-nav #menu-link-pro:focus,
#main-nav #menu-link-pro.active:hover,
#main-nav #menu-link-pro-mob:hover,
#main-nav #menu-link-pro-mob:focus,
#main-nav #menu-link-pro-mob.active:hover {
  background-color: var(--sc-carrot-tint);
  color: var(--sc-carrot) !important;
  text-decoration: none;
}
#main-nav #menu-link-pro:active,
#main-nav #menu-link-pro-mob:active { transform: scale(0.98); }
/* Rocket icon inherits the carrot label color (overrides Bootstrap utilities) */
#main-nav #menu-link-pro .fa-rocket,
#main-nav #menu-link-pro-mob .fa-rocket { color: var(--sc-carrot) !important; }

/* Keyboard focus ring - only fires on keyboard nav, not mouse click */
#main-nav .nav-link:focus-visible,
#main-nav .dropdown-toggle:focus-visible,
#main-nav .dropdown-item:focus-visible,
#main-nav #signupBtn:focus-visible {
  outline: 2px solid var(--sc-carrot);
  outline-offset: 2px;
}

/* "Find your vocal range" CTA next to the logo - default <a> blue → ink */
.vocal-range-caller--not-set {
  color: var(--sc-ink);
  text-decoration: none;
  font-family: var(--sc-menu-font);
}
.vocal-range-caller--not-set:hover,
.vocal-range-caller--not-set:focus {
  color: var(--sc-ink);
  text-decoration: underline;
}
.vocal-range-caller,
.vocal-range-caller--set {
  font-family: var(--sc-menu-font);
}

/* ─────────────────────────────────────────────────────────────
   Mobile drawer (<768px): fix overflow + alignment of items that
   are positioned via Bootstrap's `ml-auto` (which is meant for the
   horizontal desktop nav and doesn't translate to the column drawer).
   Also wrap long sub-item labels, indent them for hierarchy, and
   scale up the chrome CTAs (Sign Up, Plan Upgrade) so they read as
   proper drawer-level buttons instead of undersized inline pills.
   ───────────────────────────────────────────────────────────── */
@media only screen and (max-width: 767px) {
  /* Long sub-item labels (e.g. "Carrots Studio (Video Conferencing)",
     "Sustain & Breath training") would otherwise nowrap and overflow
     the drawer panel. Allow normal wrapping. */
  #main-nav .dropdown-menu .dropdown-item {
    white-space: normal;
    word-wrap: break-word;
    padding-left: 32px;          /* indent so sub-items read as children */
  }

  /* `ml-auto` on top-level <li>s (My Lesson Recordings, For Teachers,
     School Admin) is for desktop right-alignment in the row layout.
     In the column drawer it pushes the item against the right edge of
     the row, breaking visual alignment with the rest of the stack. */
  #main-nav .navbar-nav > li.nav-item.ml-auto {
    margin-left: 0 !important;
  }
  /* The "My Lesson Recordings" link uses .dropdown-item without a parent
     .dropdown-menu, so Bootstrap's full-width block default applies and
     long text could clip. Make sure it left-aligns and wraps. */
  #main-nav .navbar-nav > li.nav-item > .dropdown-item {
    white-space: normal;
    word-wrap: break-word;
    padding-left: 0;             /* top-level item, not a sub-item */
  }

  /* Chrome CTAs in the drawer: Sign Up + Plan Upgrade.
     The desktop styling renders these as compact inline pills sized for
     a horizontal nav row. In a vertical drawer where every other item
     reads as a quiet full-width text row, the small pills look lost AND
     the loud gradient + shadow language fights the minimalist drawer.
     Solution: scale up to full-width buttons AND flatten the loudness
     (drop the gradient + shadow on Sign Up) so they speak the same
     visual language as the rest of the drawer. */
  .secondary-nav #signupBtn,
  #main-nav #menu-link-pro-mob {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 12px 24px !important;
    font-size: 15px;
  }
  /* Sign Up on mobile: keep the gold→carrot gradient + brand glow from the
     desktop rule. Only the layout (width, padding, font-size) differs.
     Earlier we flattened to solid carrot to match the minimalist drawer,
     but a golden gradient reads as a stronger conversion CTA in this
     scroll-from-top context, which is what the auth flow needs. */

  /* The mobile Plan Upgrade lives in its own <li> with .nav-link wrapper —
     remove Bootstrap's nav-link inline-padding so the canonical button
     padding wins cleanly. */
  #main-nav li.nav-item .nav-link#menu-link-pro-mob { padding-left: 24px; padding-right: 24px; }
}

/* "Recordings" link is a .dropdown-item used as a top-level nav item (not
   nested in a .dropdown-menu). Bootstrap's .dropdown-item has different
   vertical padding than sibling .nav-links, causing a ~4px row mis-align.
   Match .nav-link metrics on desktop. */
@media only screen and (min-width: 768px) {
  #main-nav .navbar-nav > li.nav-item > .dropdown-item.main-menu-link {
    padding: 0.5rem 1rem;
    width: auto;
  }
}

/* ─────────────────────────────────────────────────────────────
   Footer typography polish (tight - no layout/spacing changes).
   Swap to design-system display font, add a subtle carrot hover.
   Background, dark theme, and link color stay as-is.
   ───────────────────────────────────────────────────────────── */
.page-footer,
.page-footer a {
  font-family: var(--sc-menu-font);
}
.page-footer-title strong,
.page-footer-links--header {
  font-family: var(--sc-menu-font);
  font-weight: var(--sc-w-semibold);
}
.page-footer-links a {
  text-decoration: none;
  transition: color .15s ease;
}
.page-footer-links a:hover,
.page-footer-links a:focus {
  color: var(--sc-carrot);
  text-decoration: none;
}
/* Force all anchors inside the footer to white with !important so
   Raptive's injected "Terms of Content Use" + "Update Privacy Preferences"
   stop rendering as Bootstrap blue. The third-party script applies
   defaults that the existing .page-footer a rule loses to without
   !important. Scope is intentionally limited to .page-footer descendants;
   targeting [class*=adthrive] would also match <body> when the Raptive
   script flags it, turning the entire site's links white. */
.page-footer a,
.page-footer a:link,
.page-footer a:visited {
  color: #fff !important;
  text-decoration: none;
}
.page-footer a:hover,
.page-footer a:focus {
  color: var(--sc-carrot) !important;
  text-decoration: none;
}