{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --color-black: var(--color-brown);
    --color-white: var(--color-beige);
    --text-color: var(--color-brown);

    --color-orange: #F59B00;
    --color-beige: #F1EEE8;
    --color-paper: #fff2e0;
    
    --bg-pragmatist: #f2ede7;
    --bg-guardian: #ece7e5;
    --bg-explorer: #f6f4e5;
    --bg-strategist: #e0f1f3;
    --bg-maverick: #fee9f3;
    --bg-craftsperson:#ffe8e5;
    --bg-champion: #ecefed;
    --bg-collaborator: var(--color-paper);
    
    
    --col-pragmatist: #916a39;
    --col-guardian: #643723;
    --col-explorer: #a89000;
    --col-strategist: #008d9b;
    --col-maverick: #f2459b;
    --col-craftsperson:#ff1d00;
    --col-champion: #809487;
    --col-collaborator: #ff9500;
    
    
    --highlight: rgba(255,255,255,0.6);
    
    --btn-size: 0.7em;
    --border-radius: 0px;
    
    --quiz-text-size: 1em;
    --quiz-q-size: 1.1em;
}

body {
    color: var(--color-brown);
    background: var(--bg-explorer);
    min-height: 100vh;
    transition: background-color .5s;
    overflow-x: hidden;
}
html {
    overflow-x: hidden;
}
.font-alt-q {
    font-family: var(--font-alt);
}
strong, b {
  font-weight: 500;
}

.container {
    box-sizing: border-box;
    padding: 0;
}


.quiz-card {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* =====  COLOUR CHANGE  ==================================================== */

.fullscreen-container.frame .frame-border {
    border-color: var(--color-brown);
}
.fullscreen-container.frame {
    border-color: var(--bg-explorer);
    transition: all .4s;
}
#menu {
    background: var(--bg-explorer);
}
.result-collaborator, .result-collaborator #menu   {
    background: var(--bg-collaborator);
}
.result-collaborator .fullscreen-container.frame  {
    border-color: var(--bg-collaborator) !important;
}
.result-collaborator .btn-expand-sections {
    background: var(--col-collaborator);
}

.result-guardian, .result-guardian #menu  {
    background: var(--bg-guardian);
}
.result-guardian .fullscreen-container.frame  {
    border-color: var(--bg-guardian) !important;
}
.result-guardian .btn-expand-sections {
    background: var(--col-guardian);
    color: var(--color-paper);
}
.result-guardian .btn-expand-sections .section-heading {
    color: var(--color-paper);
    margin-top: 5px;
}

.result-explorer, .result-explorer #menu  {
    background: var(--bg-explorer);
}
.result-explorer .fullscreen-container.frame  {
    border-color: var(--bg-explorer) !important;
}
.result-explorer .btn-expand-sections {
    background: var(--col-explorer);
}
.result-explorer .btn-expand-sections .section-heading {
    margin-top: 4px;
}

.result-strategist, .result-strategist #menu {
    background: var(--bg-strategist);
}
.result-strategist .fullscreen-container.frame  {
    border-color: var(--bg-strategist) !important;
}
.result-strategist .btn-expand-sections {
    background: var(--col-strategist);
}
.result-strategist .btn-expand-sections .section-heading {
    margin-top: 2px;
}

.result-pragmatist, .result-pragmatist #menu {
    background: var(--bg-pragmatist);
}
.result-pragmatist .fullscreen-container.frame  {
    border-color: var(--bg-pragmatist) !important;
}
.result-pragmatist .btn-expand-sections {
    background: var(--col-pragmatist);
}


.result-maverick, .result-maverick #menu {
    background: var(--bg-maverick);
}
.result-maverick .fullscreen-container.frame  {
    border-color: var(--bg-maverick) !important;
}
.result-maverick .btn-expand-sections {
    background: var(--col-maverick);
}
.result-maverick .btn-expand-sections .section-heading {
    margin-top: -4px;
}

.result-craftsperson, .result-craftsperson #menu {
    background: var(--bg-craftsperson);
}
.result-craftsperson .fullscreen-container.frame  {
    border-color: var(--bg-craftsperson) !important;
}
.result-craftsperson .btn-expand-sections {
    background: var(--col-craftsperson);
}


.result-champion, .result-champion #menu{
    background: var(--bg-champion);
}
.result-champion .fullscreen-container.frame  {
    border-color: var(--bg-champion) !important;
}
.result-champion .btn-expand-sections {
    background: var(--col-champion);
}


/* =====  LANDING PAGE  ==================================================== */

.landing-page {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; height: 100vh !important;
    box-sizing: border-box;
}
#landing-page .main-title .h1 {
    width: 100%;
    display: flex;
    justify-content: center;
}
#landing-page .main-title .h1 {
    /*max-width: 1000px;*/
    margin: auto;
}
@media screen and (max-width: 768px) {
    #landing-page .main-title {
        font-size: 0.85em;
    }
    .landing-container {
        padding-left:0 !important;
        padding-right: 0 !important;
    }
}
.landing-page h1 {
    font-size: 6em;
    color: var(--color-black);
    margin-bottom: 30px;
}

.landing-page p {
    color: var(--color-black);
    margin-bottom: 30px;
    line-height: 1.6;
}
.logo-jmt-quiz {
    width: 35%;
    max-width: 150px;
    margin-bottom: 30px
}



.progress-bar {
    background: rgba(0,0,0,0.3);
    height: 8px;
    border-radius: 4px;
    margin-bottom: 20px;
    overflow: hidden;
}

.progress-fill {
    /*background: linear-gradient(90deg, #f472b6 0%, #fb923c 100%);*/
    background: var(--color-orange);
    height: 100%;
    transition: width 0.3s ease;
}

.progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 0.8em;
    color: var(--color-brown);
    margin-bottom: 10px;
}

.stage-indicator {
    text-align: center;
    margin-bottom: 60px;
}

.stage-name {
    font-size: 0.6em;
    text-transform: uppercase;

    color: var(--color-choc);
    margin-bottom: 5px;
}

.stage-subtitle {
    font-size: 1.1em;
    letter-spacing: 0.02em;
    font-style: italic;
    color: var(--color-brown);
}

.question-container {
    margin-bottom: 30px;
}



.option {
    border-top: 1px solid rgba(0,0,0,0.3);
    border-radius: 0px;
    padding: 15px;
    margin-bottom: 0px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: var(--quiz-text-size) !important;
    font-weight: 400;
    transition: background-color .4s;
}
@media screen and (max-width: 1600px) {
    .option {
        padding: 15px;
    }
}
@media screen and (max-width: 1200px) {
    .option {
        padding: 12px 10px 20px;
    }
}

.option:hover {
    background: rgba(255,255,255,0.4);
}

.option.selected {
    background: var(--highlight);
}
.grid-options .option {
     border: 1px solid rgba(0,0,0,0.3);
}

.rapid-fire-statement {
    border-top: 1px solid rgba(0,0,0,0.3);
    border-radius: 0px;
    padding: 20px;
    margin-bottom: 16px;
    background: rgba(255,255,255,0);
}

.rapid-fire-text {
    font-size: var(--quiz-text-size);
    color: var(--color-brown);
    text-align: center;
    margin-bottom: 20px;
}

.rapid-fire-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    font-size: 0.9em;
}

.rapid-fire-btn {
    padding: 5px 32px;
    border-radius: 25px;
    border: 1px solid rgba(0,0,0,0.3);
    background: none;
    cursor: pointer;
    transition: all 0.2s;
    
}
.rapid-fire-btn:hover {
    background: rgba(255,255,255,0.4);
}
.rapid-fire-btn.selected-false, .rapid-fire-btn.selected-true {
    background: var(--highlight);
    border: 1px solid rgba(0,0,0,0.5);

}

.slider-container {
    padding: 30px 20px;
    background: rgba(255,255,255,0.3);
    border-radius: var(--border-radius);
}

.slider-label {
    text-align: center;
    font-size: var(--quiz-text-size);
    margin-bottom: 20px;
}

.slider {
    width: 100%;
    height: 10px;
    border-radius: 6px;
    background: linear-gradient(to right, #038A99 0%, #E0539A 100%);
    outline: none;
    -webkit-appearance: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    border: 3px solid #f43f5e;
    cursor: pointer;
}

.slider-value {
    text-align: center;
    font-size: 1.3em;
    font-weight: 500;
    color: var(--color-orange);
    margin-top: 15px;
}

.ranking-area {
    margin-bottom: 20px;
}

.ranking-title {
    font-size: 0.9em;
    letter-spacing: 0.02em;
    font-weight: 600;
    color: var(--color-orange);
    margin-bottom: 10px;
}

.ranked-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fef2f2;
    border: 1px solid #f43f5e;
    border-radius: 0px;
    margin-bottom: 8px;
    font-size: var(--quiz-text-size);
}

.rank-number {
    width: 32px;
    height: 32px;
    background: #f43f5e;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}

.remove-btn {
    margin-left: auto;
    color: #999;
    cursor: pointer;
    font-size: 1.2em;
}

.remove-btn:hover {
    color: #dc2626;
}

.navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
    
}
@media (max-width: 767px) {
    .navigation {
        margin-bottom: 30px;
    }
}
.btn-secondary {
    
    color: var(--color-brown);
    border: 1px solid var(--color-brown);
    padding: 15px 30px;
    border-radius: 0px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-secondary:hover {
    background: var(--color-orange);
}
.btn:disabled {
    opacity: 0.4;
    color: var(--color-brown);
    background: var(--bg-explorer);
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}
#back-btn {
    color: var(--color-brown);
    border: 1px solid var(--color-brown);
    background: var(--bg-explorer);
    transition: background 0.2s;
}
#back-btn:hover {
    background: var(--color-orange);
}
.stage-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    display: none;
}

.stage-dot {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #d1d5db;
    transition: all 0.3s;
}

.stage-dot.active {
    width: 32px;
    background: #f472b6;
}

.results-page {
    text-align: left;
    
}

.results-header {
    text-align: center;
}

.results-header h1 {
    font-size: 3.5em;
    
    margin-bottom: 10px;
    text-transform: uppercase;
}

.results-header h2 {
    font-size: 1.5em;
   
    font-weight: 400;
    margin-bottom: 20px;
}

.results-principle {
    font-size: 1.3em;
    color: var(--color-orange);
    font-weight: 700;
    margin-bottom: 10px;
}

.results-tagline {
    font-style: italic;
    color: #666;
    margin-bottom: 30px;
}

.font-pills {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.font-pill {
    padding: 10px 24px;
    background: rgba(255,255,255,0.7);
    border-radius: 50px;
    font-size: 0.95em;
    
}
.box-line {
    border-bottom: 2px solid rgba(0,0,0,0.1);
    width: 100%;
}
.box-line.pad {
    padding-top: 4em;
}

.section-box {
    background: none;
    
    padding: 50px 0;
    margin-bottom: 25px;
    margin-top: 25px;
}

.section-title {
    font-size: 1.2em;
    font-weight: 700;
  
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blend-grid {
    display: flex;
    width: 100%;
    flex-direction: row;
    gap: 30px;
    margin: 50px 0;
}

.blend-type {
    width: 50%;
    text-align: center;
    background: rgba(255,255,255,0.7);
    padding: 40px;
}

.blend-name {

}

.blend-percentage {
font-weight: 500;
    margin: 10px 0;
}

.blend-tagline {
    font-size: 0.9em;
    color: #666;
    font-style: italic;
}

.what-this-means {
    margin-top: 20px;
}

.description {

    
}

.manifesto-box {
    background: #fef2f2;
    border: 2px solid #fecaca;
    padding: 25px;
    font-style: italic;
    
}

.compatibility-box {
    background: #f0fdf4;
    border: 2px solid #bbf7d0;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 25px;
}

.compat-title {
    font-size: 1.1em;
    font-weight: 700;
    
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.type-tags {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.type-tag {
    background: white;
    border: 2px solid #86efac;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.9em;
    
}

.compat-text {
    font-size: 0.95em;
    line-height: 1.6;
 
}

.watch-out-box {
    background: #ecfeff;
    border: 2px solid #a5f3fc;
    border-radius: 12px;
    padding: 15px;
    margin-top: 15px;
    font-size: 0.9em;
    line-height: 1.6;

}

.clash-box {
    background: #fef3c7;
    border: 2px solid #fde68a;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 25px;
}

.clash-title {
    font-size: 1.1em;
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.clash-tag {
    background: white;
    border: 2px solid #fde68a;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.9em;
}

.clash-text {
    font-size: 0.95em;
    line-height: 1.6;
}

.make-it-work-box {
    background: #fff7ed;
    border: 2px solid #fed7aa;
    border-radius: 12px;
    padding: 15px;
    margin-top: 15px;
    font-size: 0.9em;
    line-height: 1.6;
}

.dealbreaker-box {
    background: #fef2f2;
    border: 2px solid #fecaca;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 25px;
}

.dealbreaker-title {
    font-size: 1.1em;
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dealbreaker-list {
    list-style: none;
    padding: 0;
}

.dealbreaker-list li {
    padding: 8px 0;
    font-size: 0.95em;
    line-height: 1.6;
}

.dealbreaker-list li:before {
    content: "• ";
    font-weight: bold;
    margin-right: 8px;
}

.swipe-right-box {
    background: #fce7f3;
    border: 2px solid #fbcfe8;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 25px;
}

.swipe-title {
    font-size: 1.1em;
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.swipe-text {
  
}

.cta-text {
    text-align: center;
    font-style: italic;
    margin: 60px 0;
    padding-top: 50px;
    font-size: 1.1em;
}

.breakdown-section {
    margin: 40px auto;
}

.breakdown-title {
    font-size: 1.8em;
    font-weight: 700;
    margin-bottom: 20px;
}

.breakdown-bar {
    margin-bottom: 20px;
}

.breakdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.breakdown-name {

}

.breakdown-percent {
    font-size: 1.1em;
    font-weight: 700;
}

.breakdown-bar-bg {
    width: 100%;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
}

.breakdown-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
}

.retake-btn {
    display: block;
    margin: 30px auto;
}

.hidden {
    display: none;
}


.question-text {
    color: var(--text-color);
    padding-bottom: 30px;
    font-weight: 500;
    font-size: var(--quiz-q-size);
}

@media (max-width: 768px) {
    .blend-grid {
        flex-direction: column;
        gap: 20px;
        margin: 50px 0;
    }
    .blend-type {
        width: 100%;
    }
    .quiz-card {
        padding: 24px;
    }

    .landing-page h1 {
        font-size: 2em;
    }


}



.this-or-that, .multiple-select-info{
    font-size: 0.9em;
    margin-top: 15px;
    margin-bottom: 15px;
    opacity: 1;
    color: var(--color-orange);
    font-weight: 500;
}

.secondary-holder {
    border: 1px solid var(--color-brown);
    padding: 20px 50px;border-radius: 16px;
    background: rgba(255,255,255,0.5);
    margin: 80px 0 60px !important;
}
.secondary-holder-section {
    display: none;
}
.secondary-holder-button {
    text-align: center;
    cursor: pointer;
    font-weight: 400;
}
.material-symbols-outlined {
    transform:  translateY(12%);
    padding-right: 10px;
    opacity: 0.7;
}
@media (max-width: 1299px) {
    .material-symbols-outlined {
        transform:  translateY(12%);
        padding-right: 5px;
        opacity: 0.7;
    }
}

/**** NEW ****/


/* Results Page Container */
.results-page {
    /*padding: 60px 40px 100px;
    max-width: 1400px;
    margin: 0 auto;*/
}

/* Hero Title */
.results-page .display-1 {
    
    color: var(--color-brown);
}

/* Info Box Base Style */
.info-box {
    border: 1px solid var(--color-brown);
    padding: 30px 25px 35px;
    border-radius: 0;
    height: 100%;
}

.box-label {
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-brown);
    line-height: 1;
}

.box-title {
    font-size: 1.1rem;
    color: var(--color-brown);
    margin-bottom: 1rem;
}



/* Manifesto Box */
.manifesto-box-new {
   display: flex;
    flex-direction: row;
    gap: 25px;
}
.manifesto-box-new .icon-holder  {
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-holder {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.archetype-icon-small {
    width: 80%;
    height: auto;
}
@media (max-width: 1499px) {
    .manifesto-box-new .icon-holder  {
        width: 100%;
    }
    .manifesto-box-new  {
        gap: 15px;
    }
}
@media (max-width: 1199px) {

    #primary-type-name {
        width: 100%;
        text-align: center;
    }
    .manifesto-box-new {
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }
    .manifesto-box-new .icon-holder  {
       width: 60%;
    margin: auto;
    }
    .manifesto-box-new .icon-holder img  {
       width: 40%;
    }
    .archetype-icon-small {
        width: 25% !important;
    }
}
@media (max-width: 539px) {
    .manifesto-box-new .icon-holder  {
       width: 100%;
    }
    .archetype-icon-small {
        width: 85%;
    }
}

/* Key Quote Box */
.key-quote-box-new {
    position: relative;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    opacity: 1;
    
    aspect-ratio: 5/3.25;
}
.key-quote-box-new .font-alt-q {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}
.key-quote-box-new::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.15;
    z-index: 1;
}

.key-quote-large {
    /*font-size: clamp(2rem, 4vw, 3.5rem);*/
    width: 100%;
    color: var(--color-brown);
    line-height: 90%;
    text-align: center;
    position: relative;
    z-index: 2;
}
.sticky-box {
   /* position: sticky;
    top:30px;
    border: 1px solid;*/
}

/* Traits Box */

.traits-box {
   
}

.traits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.traits-list li {
 
}

.traits-list li::before {

}

/* Typeface Box */
.typeface-box {

}

.typeface-name {
  font-weight: 500;
  font-size: 1.1em;
}

.typeface-designer {
  font-size: 0.85rem;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 1em;
}

.typeface-description {

}


/* Email CTA Section */
.email-cta-section {
    background: var(--color-brown);
    color: var(--color-paper);
    padding: 40px 40px;
    border-radius: 0;
    margin: 60px 0;
}

.email-cta-title {
    font-size: 1.4rem;
    font-weight: 500;
    margin: 0;
}

.email-cta-subtitle {
    
    opacity: 0.8;
    font-weight: 400;
}
.email-cta-subtitle strong {
    font-weight: 600;
}
.email-form-inline .input-group {
    max-width: 420px;
}

.email-input-new {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: var(--color-paper);
    padding: 12px 20px;
    border-radius: 0px;
}

.email-input-new::placeholder {
    color: var(--color-paper);
}

.email-input-new:focus {
    background: rgba(255, 255, 255, 0.3);
    border-color: var(--color-orange);
    color: var(--color-beige);
    box-shadow: none;
}

.btn-email-submit {
    background: var(--color-orange);
    color: var(--color-brown);
    border: none;
    padding: 12px 25px;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 0;
    text-transform: uppercase;
}

.btn-email-submit:hover {
    background: #d68900;
    color: var(--color-brown);
}

/* Chart Container */
.chart-container {
    padding: 30px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-container img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 767px) {

    .chart-container {
        padding: 0px;
    }

}

/* Archetype Icons in Vibes/Clashes */

.archetype-icons {
    display: flex;
    width: 65%;
    margin: auto;
    gap: 0px;
}
.archetype-icons .text-center {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
}
.archetype-icon-badge {
    width: 60%;
}
.archetype-icon-badge img {
    width: 100%;
   
}
.archetype-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--color-brown);
    margin-top: 2px;
    text-align: center;
    width: 100%;
}
@media (max-width: 1399px) {
    
    .archetype-icons {
          width: 90%;
      }
    .archetype-icon-badge img {
        width: 90%;

    }
}
@media (max-width: 991px) {
    
    .archetype-icons {
          width: 80%;
      }
    .archetype-icon-badge img {
        width: 90%;

    }
}
@media (max-width: 767px) {
    
    .archetype-icons {
          width: 70%;
          max-width: 200px;
      }
    .archetype-icon-badge img {
        width: 100%;
    }
}

/* Vibes Box */
.vibes-box {
  
}

/* Clashes Box */
.clashes-box {
  
}

/* Fun Stats Box */
.fun-stats-box {
    
}

.fun-stats-list-new {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fun-stats-list-new li {
    list-style: none;

    margin-bottom: 0rem;
    padding-left: 0;
}
.fun-stats-list-new li:after {
    content: '*';
    margin-top: 5px;
    display: block;
}
.fun-stats-list-new li:last-of-type {
    margin-bottom: 0;
}
.fun-stats-list-new li:last-of-type:after {
    content: '';
    margin-top: 0px;
    display: none;
}


/* Famous Last Words Box */
.famous-last-words-box {

}

.flw-text-new {
font-style: italic;
}

/* Secondary Section */

#expanded-sections {
    
}

.secondary-section {
}
.secondary-line {
    width: 100%;
    border-bottom: 0px solid var(--color-brown);
}
.section-heading {
    padding-left: 25px;
}
#secondary-type-name {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1.1em;
    margin-bottom: 5px;
}

/* Blend Breakdown */
.blend-breakdown {
    margin-top: 0px;
}

.blend-item {
    display: flex;
    align-items: flex-start !important;
    
    
    flex-direction: column;
    text-align: center;
    width: 100%;
    border-left: 1px solid rgba(43, 5, 5, 0.5);
}
.blend-item-box {
    box-sizing: border-box;
    padding: 0 30px;
}
.blend-item div {
    width: 100%;
}
.blend-item:last-child {
    border-bottom: none;
}
.blend-percentage {

    color: var(--color-orange);
}

.btn-expand-txt {
    font-weight: 500;
    margin-right: 15px;
}
@media (max-width: 1899px) {
    .btn-expand-txt {
        margin-right: 80px;
    }
}
@media (max-width: 1199px) {
    .btn-expand-txt {
        margin-right: 15px;
    }
}
@media (max-width: 768px) {
    .btn-expand-txt {
        margin-right: 0px;
    }
    .blend-item {
        padding: 30px 0 20px;
        border: none;
        border-top: 1px solid rgba(43, 5, 5, 0.5);
    }
.section-heading {
    padding-left: 0px;
}
}

/* Full Breakdown Section */
.breakdown-section-new {

}

.breakdown-bar {
    margin-bottom: 25px;
}

.breakdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.breakdown-name {
    font-weight: 500;
}

.breakdown-percent {
    font-weight: 500;
}

.breakdown-bar-bg {
    width: 100%;
    height: 8px;
    background: rgba(43, 5, 5, 0.1);
    border-radius: 0;
    overflow: hidden;
}

.breakdown-bar-fill {
    height: 100%;
    border-radius: 0;
    transition: width 0.8s ease;
}

/* Expand Sections Button */

.section-heading {
  
}

.btn-expand-sections {
    width: 100%;
    border-top: 0px solid var(--color-brown);
    padding: 30px 0px;
    border-radius: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
    transition: all 0.3s;
}

.btn-expand-sections:hover {
    /*background: var(--color-brown);
    color: var(--color-paper);*/
    cursor: pointer;
    
}

.btn-expand-sections .font-modifier {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    width: 50%;
}
.btn-expand-sections .font-modifier .section-heading {
    position: absolute;
    top:50%;
    left:0;
    transform: translateY(-50%);
}
@media (max-width: 991px) {
    .btn-expand-sections .font-modifier {
        display: block;
        width: 100%;
        text-align: center;
        padding-top: 10px;
    }
    .btn-expand-sections .font-modifier .section-heading {
        position: relative;
        transform: none;
    }
}

.btn-expand-sections .material-symbols-outlined {
    transition: transform 0.3s;
}

.btn-expand-sections.active .material-symbols-outlined {
    transform: rotate(180deg);
}

/* Retake Button */
.retake-btn {
    background: var(--color-brown);
    color: var(--color-paper);
    border: none;
    padding: 15px 50px;
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: uppercase;
    border-radius: 0;
    margin-top: 2rem !important;
}

.retake-btn:hover {
    background: var(--color-orange);
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .results-page {
        padding: 40px 0px 80px;
    }

    .email-cta-section {
        padding: 35px 20px;
        text-align: center;
    }

    .email-form-inline .input-group {
        margin: 20px auto 0;
    }

    .chart-container {
        margin-bottom: 20px;
    }

    .key-quote-large {
        
    }

    .key-quote-box-new::before {
        font-size: 12rem;
    }
    .btn-expand-sections {

        padding: 15px 0px;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 0px;
    }
    .btn-expand-sections span {
        transform: translateY(5px);
    }

}

@media (max-width: 767px) {
    .results-page .display-1 {
        font-size: 2.5rem;
    }

    .info-box {
        padding: 20px;
    }

    .email-cta-title {
        font-size: 1.1rem;
    }

    .email-cta-subtitle {
        font-size: 0.95rem;
    }

    .section-heading {
        
    }

    .key-quote-large {
        
    }

    .key-quote-box-new::before {
        font-size: 8rem;
    }
}

/* Animation */
.results-page .row > div {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
}

.results-page .row:nth-child(1) > div {
    animation-delay: 0.1s;
}

.results-page .row:nth-child(2) > div:nth-child(1) {
    animation-delay: 0.2s;
}

.results-page .row:nth-child(2) > div:nth-child(2) {
    animation-delay: 0.3s;
}

.results-page .row:nth-child(4) > div:nth-child(1) {
    animation-delay: 0.4s;
}

.results-page .row:nth-child(4) > div:nth-child(2) {
    animation-delay: 0.5s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Print Styles */
@media print {
    .email-cta-section,
    .btn-expand-sections,
    .retake-btn,
    #share-section {
        display: none !important;
    }
    .info-box {
        break-inside: avoid;
    }
    .results-page {
        padding: 20px;
    }
}

/* Share Link Section */
#share-section {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid rgba(255,255,255,0.6);
    background: none;
    padding: 45px 15px;
    text-align: center;
}
.email-form-section {
    height: 100%;
    display: flex;
    align-items: center;
}

.share-link-text {
    color: var(--color-paper);
    text-decoration: none;
    text-align: center;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 125%;
    cursor: pointer;
    transition: color 0.2s;
    border: 1px solid rgba(255,255,255,0.6);
    padding: 10px 20px 12px;
}

.share-link-text:hover {
    color: var(--color-orange);

}

/* Take Quiz Button (for shared results viewers) */
.btn-take-quiz {
    background: var(--color-orange);
    color: var(--color-brown);
    border: none;
    padding: 15px 50px;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-take-quiz:hover {
    background: #d68900;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(245, 155, 0, 0.3);
}

#download-buttons .btn-secondary {
    background: var(--color-orange);
    padding: 10px 20px;
}
@media (max-width: 1399px) {
    #download-buttons  {
        margin-top: 25px;
        margin-bottom: 0px;
    }
}
@media (max-width: 1199px) {
    #share-section {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        border-top: 1px solid rgba(255,255,255,0.5);
        padding: 30px 15px 0px;
        margin-top: 10px;
    }
    .email-cta-section {
        text-align: center;
    }
    .email-form-section {
        justify-content: center;
    }
    #download-buttons  {
        text-align: center;
    }
    #download-buttons .btn-secondary {
        padding: 10px 20px;
        width: 100%;
    }

    #download-buttons .d-flex  {
        justify-content: center;
    }
}