/* Global Resets & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Helvetica Neue Regular', sans-serif;
    line-height: 1.6;
    color: #f2f2f2;
    background-color: #000000;
    padding-top: 80px; /* Space for fixed header */
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    /* outline: 3px dashed red !important; */ /* REMOVED DIAGNOSTIC */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Helvetica Neue Bold', sans-serif; /* Default heading font */
    margin-bottom: 0.75em;
    color: #FFFFFF; /* Default white headings */
}

h2 { /* Main section titles */
    font-size: 2.5em;
    border-bottom: 2px solid #FA4C14;
    padding-bottom: 0.3em;
    margin-bottom: 1em;
    color: #FA4C14; /* Keep section titles orange */
}

h3 { /* Sub-group titles */
    font-size: 1.8em;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    color: #FFFFFF;
}

h4 { /* Item titles */
    font-size: 1.3em;
    color: #FFFFFF;
}

p {
    margin-bottom: 1em;
    color: #F2F2F2;
}

a {
    color: #FA4C14;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #d83a0f;
}

/* Font Face Declarations */
@font-face {
    font-family: 'Helvetica Neue Bold';
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Helvetica Neue Regular';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Times New Roman Regular';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Times New Roman Light';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Header */
header {
    /* background-color: #ffffff; */
    background-color: #000000; /* Dark header */
    border-bottom: 1px solid #333; /* Darker border */
    padding: 15px 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.05); */ /* Remove light shadow */
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-container img#header-logo {
    height: 40px;
    width: auto;
    /* Assuming default header logo is dark, need the light one */
    /* We might need JS to switch this, or just hardcode the light one */
    /* For now, let's assume the SVG handles contrast or we add a filter */
    filter: brightness(0) invert(1); /* Simple way to invert dark SVG to white */
}

header nav ul {
    list-style: none;
    display: flex;
}

header nav ul li {
    margin-left: 25px;
}

header nav ul li a {
    font-family: 'Helvetica Neue Regular', sans-serif;
    font-size: 1em;
    /* color: #333; */
    color: #f2f2f2; /* Light nav links */
    font-weight: 500;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
}

header nav ul li a:hover,
header nav ul li a.active {
    color: #FA4C14; /* Keep orange hover/active */
    border-bottom-color: #FA4C14;
}

/* Main Content */
main {
    padding: 40px 0;
}

.logo-intro-text p {
    margin-bottom: 1em;
    font-size: 16px; /* Set to 16px */
    color: #FFFFFF; /* Set text color to white */
}

/* Remove general .brand-section outline and apply specific ones */
.brand-section {
    width: 100%;
    background-color: #000000;
    padding: 30px;
    margin-bottom: 40px;
    border-radius: 8px;
}

#logo.brand-section {
    /* REMOVING FORCEFUL STYLES AND DIAGNOSTIC OUTLINE */
    /* 
    outline: 5px solid limegreen !important; 
    width: 100% !important;
    max-width: none !important; 
    margin-left: 0 !important; 
    margin-right: 0 !important; 
    padding-left: 30px !important; 
    padding-right: 30px !important; 
    box-sizing: border-box !important; 
    float: none !important; 
    display: block !important; 
    */
}

/* Add outline to logo-group for further diagnosis */
#logo .logo-group {
    /* outline: 3px dotted yellow !important; */ /* REMOVED DIAGNOSTIC */
}

#partner-pairing.brand-section {
    /* outline: 5px solid dodgerblue !important; */ /* REMOVED DIAGNOSTIC */
}

/* Logo Section */
.logo-group {
    margin-bottom: 10px; /* Further Reduced */
    /* padding-bottom: 30px; */ /* Removed */
    /* border-bottom: 1px solid #ddd; */ /* Removed solid border */
}

.logo-group:last-of-type {
    margin-bottom: 20px; /* Reduce margin for the last group before clearspace */
    /* border-bottom: none; */ /* Keep border for consistency, or remove if preferred */
}

.logo-group h3 {
    border-left: none;
    padding-left: 0;
    margin-bottom: 0; /* Remove margin as spacing handled by header padding */
    margin-top: 0; /* Added to ensure no top margin */
}

/* Header for each logo group containing title and trigger */
.logo-group-header,
.font-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 10px 0; /* Adjusted for even spacing: 0 top, 10px bottom */
    /* border-top: 1px dashed #555; */ /* REMOVED Dashed line above */
    border-bottom: 1px dashed #555; /* Dashed line below */
    margin-bottom: 10px; /* Adjusted for even spacing */
    cursor: pointer; /* Make the whole header clickable */
    user-select: none; /* Prevent text selection on click */
}

/* Ensure font titles within the header have no margin */
.logo-group-header h3,
.font-group-header h3 {
    margin-bottom: 0;
    margin-top: 0;
}

/* Styles for Clearspace within each Logo Group */
.clearspace-subsection {
    margin-top: 0; /* Reduced */
    margin-bottom: 30px; /* Space above the logo showcase */
    padding: 0px;
    border-radius: 6px;
    /* Add top padding to push content away from header when open */
    padding-top: 30px; 
}

.clearspace-subsection h4 {
    font-size: 1.1em;
    color: #FFFFFF;
    margin-bottom: 10px;
    font-family: 'Helvetica Neue Bold', sans-serif; /* Explicitly confirm */
}

.clearspace-subsection p {
    font-size: 16px; /* Was 1em, now explicitly 16px */
    /* color: #aaa; */ /* Lighter grey */
    color: #FFFFFF; /* White */
    margin-bottom: 15px;
}

.logo-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    row-gap: 50px;
    column-gap: 30px;
    margin-bottom: 30px;
}

.logo-item {
    text-align: center;
    padding: 20px;
    border-radius: 6px;
}

.logo-item h4 {
    margin-bottom: 15px;
    /* color: #333; */ /* Removed: Inherit default white h4 color */
}

.logo-item p {
    font-size: 16px; /* Was 0.9em, now 16px */
    color: #FFFFFF; /* White */
    margin-top: 10px;
    margin-bottom: 15px; /* Space before download buttons */
}

.logo-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border-radius: 4px;
    /* height and padding will be set by JavaScript */
}

.logo-bg.light {
    background-color: #F2F2F2; /* Keep this light for dark logos */
    border: 1px solid #F2F2F2; /* Added white border */
}

.logo-bg.dark {
    /* background-color: #2c2c2c; */
    background-color: #000000;
    border: 1px solid #F2F2F2; /* /* Updated to brand black */
}

.logo-bg img {
    max-width: 100%;
    max-height: 100%;
}

.clearspace-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.clearspace-image-container {
    background-color: #000000;
    padding: 20px;
    border-radius: 6px;
    margin-top: 15px;
    overflow: hidden;
    outline: 1px solid #F2F2F2; /* Use outline to avoid clipping */
    outline-offset: -1px; /* Pull outline slightly inwards */
    display: flex; /* Added for centering */
    justify-content: center; /* Added for horizontal centering */
    align-items: center;
    max-height: 280px; /* Added for vertical centering */
}

.clearspace-image-container img {
    width: auto;
    height: auto;
    max-width: 100%;
    /* max-height: 100%; */ /* Re-added, but now overriding with explicit px */
    max-height: 260px; /* Explicit max-height based on container padding */
    /* display: block; */ /* Removed for flex centering */
    /* filter: brightness(1.1); */ /* Temporarily removed for testing */
    /* object-fit: contain; */ /* Ensure it's removed */
}

/* ==================================
   Color Section Styles
   ================================== */
#colors {
    /* background-color: var(--almost-black); */ /* Optional: if a dark bg is needed for the whole section */
    /* color: var(--grey); */
}

#colors h2 {
    /* Styles for the main H2 if different from global brand-section h2 */
}

/* New two-column layout for Colors section */
.colors-content-wrapper.two-column-layout {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for responsiveness */
    gap: 20px; /* Space between columns */
}

.colors-text-column {
    flex: 0 0 40%; /* Text takes 40% width */
    max-width: 40%;
}

.colors-swatches-column {
    flex: 0 0 calc(60% - 20px); /* Swatches take 60% width, accounting for gap */
    max-width: calc(60% - 20px);
}

.colors-text-description p {
    margin-bottom: 1em;
    line-height: 1.6;
    font-size: 16px; /* Set to 16px */
    color: #FFFFFF; /* Set text color to white */
}

.colors-swatches-layout {
    display: flex;
    flex-direction: column; /* Stack swatch groups vertically */
    gap: 30px;
}

.swatch-group {
    width: 100%;
}

.primary-swatches .swatch-row,
.tertiary-swatches {
    display: flex;
    gap: 20px;
}

.primary-swatches .swatch-row {
    margin-top: 20px; /* Space between black swatch and row below */
}

.color-swatch-item {
    position: relative; /* For positioning details */
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease-out;
    border: 1px solid #F2F2F2; /* Moved border here */
}

.color-swatch-item:hover {
    transform: scale(1.03);
}

.swatch {
    display: block;
    width: 100%;
    height: 100%;
}

/* Primary Swatch Sizes & Layout */
.primary-swatch {
    height: 200px; /* Was 250px, 20% reduction */
}

.black-swatch {
    width: 100%;
}

.grey-swatch,
.orange-swatch {
    flex: 1; /* Share space equally */
}

/* Tertiary Swatch Sizes & Layout */
.tertiary-swatch {
    flex: 1; /* Share space equally */
    height: 96px; /* Was 120px, 20% reduction */
}

/* Color Details Styling */
.color-details {
    font-family: 'Times New Roman Light', monospace;
    font-size: 0.85em;
    line-height: 1.5;
}

.overlay-details {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: #fff; /* Default white text */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.overlay-details.light-text-details {
    color: #111; /* Black text for light backgrounds like grey */
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.3);
}

.overlay-details span {
    display: block;
}

/* Adjustments for overlay details on smaller tertiary swatches */
.tertiary-swatch .overlay-details {
    font-size: 0.7em; /* Smaller font for tertiary swatches */
    bottom: 10px;
    left: 10px;
}

/* Typography Section - New Layout */
.dark-theme-section {
    padding: 50px 30px; /* More vertical padding */
}

.dark-theme-section h2, /* Main section title, if any */
.dark-theme-section h3,
.dark-theme-section h4,
.dark-theme-section p,
.dark-theme-section span,
.dark-theme-section a {
    /* color: #f2f2f2; */ /* Mostly handled by global body/element styles now */
}

.dark-theme-section .brand-section h2 { /* Override general brand-section h2 color */
    color: #FA4C14; /* Orange for main title within dark section */
    border-bottom-color: #FA4C14;
}

/* This rule remains for inter-group spacing and border */
.font-family-group {
    /* display: grid; */ /* Moved to .font-content-grid-wrapper */
    /* grid-template-columns: 1fr 1fr 1fr; */ /* Moved */
    /* grid-template-rows: auto auto; */ /* Moved */
    /* gap: 40px 30px; */ /* Moved */
    margin-bottom: 20px; /* Reduced space between primary and secondary font groups */
    padding-bottom: 10px; /* Reduced padding */
    /* border-bottom: 1px solid #333; */ /* REMOVED Separator */
}

/* New wrapper for the grid content inside collapsible area */
.font-content-grid-wrapper {
    display: grid;
    /* grid-template-columns: 1fr 1fr; */ /* Changed to 40/60 split */
    grid-template-columns: 2fr 3fr; /* Equivalent to 40% and 60% */
    grid-template-rows: auto; /* Single row of content */
    gap: 40px 30px;
    padding-top: 30px; /* Add space between header and content when open */
}

.font-family-group:last-of-type {
    margin-bottom: 0;
    /* border-bottom: none; */ /* Rule no longer needed as base border is removed */
}

/* Remove explicit grid positioning for children, they will flow into the 2 columns */
.font-description-column,
.font-glyph-column,
.font-showcase-column {
    grid-column: auto; 
    grid-row: auto;
}

/* Ensure glyph column still centers its content vertically */
.font-glyph-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Ensure paragraphs within the glyph column take available width and align left */
.font-glyph-column p {
    text-align: left;
    width: 100%; /* Allow paragraphs to take full width of the column */
    max-width: 40ch; /* Optional: Limit line length for readability */
    margin-left: auto; /* Center the text block if width constrained */
    margin-right: auto; /* Center the text block if width constrained */
}

/* Add margin between elements in the glyph column */
.font-glyph-column > * {
    margin-bottom: 15px; /* Default spacing */
}
.font-glyph-column > *:last-child {
    margin-bottom: 0; /* No margin on last element (download button) */
}
.font-glyph-column .glyph-display {
    margin-bottom: 10px; /* Keep original glyph spacing */
}
.font-glyph-column .glyph-caption {
    margin-bottom: 25px; /* More space after caption before paragraphs */
}
.font-glyph-column .font-download-meta-link {
    margin-top: 10px; /* Space between last paragraph and download button */
}

.font-family-title {
    font-family: 'Helvetica Neue Bold', sans-serif; /* Explicitly confirm */
    font-size: 3.5em;
    line-height: 1.1;
    margin-bottom: 25px;
    color: #FFFFFF !important; /* Ensure white */
    border-bottom: none !important;
}

.font-family-group p {
    font-family: 'Helvetica Neue Regular', sans-serif;
    font-size: 0.9em;
    line-height: 1.6;
    color: #ccc; /* Lighter grey for paragraph text */
    margin-bottom: 15px;
}

.glyph-display {
    font-size: 12em; /* Extremely large glyph */
    line-height: 1;
    margin-bottom: 10px;
}

.glyph-display.nn-grotesk {
    /* font-family: 'Helvetica Neue Regular', sans-serif; */
    font-family: 'Helvetica Neue Bold', sans-serif; /* Changed to Bold */
}

.glyph-display.mondwest {
    font-family: 'Times New Roman Regular', serif;
    font-size: 10em; /* Times New Roman might need slightly different sizing */
}

.glyph-caption {
    font-family: 'Times New Roman Light', monospace;
    font-size: 0.75em;
    color: #888; /* Dim caption color */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.font-showcase-column {
    display: flex; /* Added for centering */
    flex-direction: column; /* Added for centering */
    justify-content: center; /* Added for centering showcase blocks vertically */
}

.font-style-showcase {
    margin-bottom: 25px;
}

.font-style-showcase:last-of-type {
    margin-bottom: 0;
}

.style-label-row {
    display: flex;
    justify-content: space-between; /* Pushes label left, use-case right */
    align-items: baseline;
    margin-bottom: 8px;
}

.style-label {
    /* font-family: 'Non Natural Mono Light', monospace; */ /* Font set by inner span */
    font-size: 0.7em;
    color: #888; /* Keep dim */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

/* Ensure the spans within style-label inherit color and other text properties if needed,
   but primarily rely on their specific font classes for font-family. */
.style-label span {
    /* Inherit color from .style-label by default */
    /* Any specific overrides for these spans can go here if necessary */
}

.style-use-case {
    font-family: 'Times New Roman Light', monospace;
    font-size: 0.7em;
    color: #bbb; /* Slightly brighter than label */
    text-transform: uppercase;
    text-align: right;
}

.char-preview {
    /* font-size: 3.6em !important; */ /* Increased size 2x, added !important for diagnostics */
    font-size: 2em !important; /* Reduced size */
    line-height: 1.4;
    color: #e0e0e0 !important;
    word-break: break-word;
    margin-bottom: 0; /* Remove default p margin */
}

.nn-grotesk-bold { font-family: 'Helvetica Neue Bold', sans-serif !important; }
.nn-grotesk-regular { font-family: 'Helvetica Neue Regular', sans-serif !important; }
.nn-mono-light { font-family: 'Times New Roman Light', monospace !important; font-size: 1.1em; /* Slightly adjust mono size */ }
.mondwest-regular { font-family: 'Times New Roman Regular', serif !important; }

.font-glyph-column .font-download-meta-link {
    margin-top: 20px; /* Space between caption and download button */
}

.font-download-meta-link {
    padding: 8px 20px; /* Match .download-btn padding */
    transition: background-color 0.3s, color 0.3s;
    position: relative; /* Added for pseudo-elements */
    color: #FFFFFF !important; /* Changed to white text, forced */
    font-size: 0.9em; /* Match .download-btn size */
}

.font-download-meta-link:hover {
    background-color: #FA4C14;
    color: #fff;
}

/* Responsive adjustments for Typography Section */
@media (max-width: 1100px) { /* Adjust breakpoint as needed */
    /* Target the wrapper instead */
    .font-content-grid-wrapper {
        /* grid-template-columns: 1fr 1fr; */ /* Stays 2 columns */
        /* grid-template-rows: auto auto; */ /* Not needed, single row */
        gap: 30px; /* Reduce gap */
    }
    /* Rules setting specific grid columns/rows for children are removed/reset above */
    /* .font-description-column { ... } */
    /* .font-glyph-column { ... } */
    /* .font-showcase-column { ... } */

    .glyph-display { font-size: 9em; }
    .glyph-display.mondwest { font-size: 7em; }
    .font-family-title { font-size: 2.8em; text-align: center; }
    .char-preview { font-size: 1.1em; }
}

@media (max-width: 768px) {
    .dark-theme-section {
        padding: 40px 20px;
    }
    /* Target the wrapper instead */
    .font-content-grid-wrapper {
        grid-template-columns: 1fr; /* Single column */
        /* grid-template-rows: auto; */ /* Already auto */
        gap: 30px;
    }
    /* Child columns will stack automatically */
    /* .font-description-column, */
    /* .font-glyph-column, */
    /* .font-showcase-column { ... } */

    .font-family-title { font-size: 2.8em; text-align: center; }
    .glyph-display { font-size: 7em; }
    .glyph-display.mondwest { font-size: 6em; }
    .char-preview { font-size: 1.1em; }
}

/* ==================================
   Typography Section Styles (Collapsible + 3-Column Primary)
   ================================== */
#typography h2 {
    /* Retains general H2 styling (orange, bottom-border) */
    margin-bottom: 20px; /* Space before the first font group */
}

.font-family-group {
    margin-bottom: 20px;
    /* border-bottom: 1px solid #333; */ /* Optional: if a separator is desired */
}
.font-family-group:last-of-type {
    margin-bottom: 0;
    /* border-bottom: none; */
}

.font-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0; /* Padding for the header */
    border-bottom: 1px dashed #555;
    margin-bottom: 0; /* Content will have padding when open */
    cursor: pointer;
    user-select: none;
}

.font-group-header .font-family-title {
    font-family: 'Helvetica Neue Bold', sans-serif;
    font-size: 3em; /* Large title for PRIMARY/SECONDARY */
    color: #FFFFFF;
    line-height: 1.1;
    margin-bottom: 0; /* Reset margin */
    border-bottom: none; /* Ensure no inherited border */
}

/* Styles for .collapsible-trigger and .toggle-icon should be mostly existing and fine */
/* .collapsible-content styles should also be existing (max-height transition) */

.collapsible-content > .typography-3col-font-layout { /* Updated class name */
    padding-top: 30px; /* Add space when collapsible opens */
    padding-bottom: 20px; /* Add space at the bottom */
}

.typography-3col-font-layout { /* Updated class name - 3-column layout for font sections */
    display: grid;
    grid-template-columns: 0.75fr 1fr 1fr; 
    gap: 40px; 
    align-items: start; 
}

/* type-column p, description-column specific styles, glyph-column, styles-column, font-style-item, etc. */
/* These styles will now apply to both Primary and Secondary layouts where structure is similar */

.type-column p { /* General p within the 3-col layout */
    font-size: 16px; /* Was 0.9em, now 16px */
    line-height: 1.6;
    color: #FFFFFF; /* Changed from #ccc to white */
    margin-bottom: 15px;
}

.glyph-column {
    display: flex;
    flex-direction: column; /* To stack tag and glyph */
    align-items: center;
    justify-content: center;
    height: 100%; 
    min-height: 300px; 
}

.glyph-detail-tag {
    font-family: 'Times New Roman Light', monospace;
    font-size: 0.7em;
    color: #FFFFFF;
    background-color: #000000; /* Black background for the tag */
    padding: 3px 8px;
    margin-bottom: 15px; /* Space between tag and glyph */
    text-transform: uppercase;
    border: 1px solid #F2F2F2; /* Optional: if you want a border around the tag */
}

.glyph-display-redesigned { /* General style for large Aa */
    font-family: 'Helvetica Neue Bold', sans-serif; 
    font-size: 15em; 
    line-height: 1;
    color: #FFFFFF;
    text-align: center;
}

.glyph-font-name {
    font-family: 'Times New Roman Light', monospace;
    font-size: 0.85em; /* Smaller than body text */
    color: #bbbbbb; /* Light grey, less prominent than main text */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 10px; /* Space from glyph */
    margin-bottom: 5px; /* Space below font name, if anything follows */
    text-align: center;
}

.glyph-font-name.nng-font-name {
    font-family: 'Helvetica Neue Regular', sans-serif;
    /* Adjust font-size if needed, as it might render differently than mono */
    /* font-size: 0.9em; */ 
}

.glyph-font-name.mondwest-font-name {
    font-family: 'Times New Roman Regular', serif;
    /* Adjust font-size if needed */
    /* font-size: 1em; */ /* Mondwest might appear smaller */
}

.glyph-display-redesigned.mondwest-glyph { /* Specific style for Mondwest Aa */
    font-family: 'Times New Roman Regular', serif;
    /* Other mondwest-glyph specific styles can go here if needed, e.g., adjusting size if it renders differently */
}

.styles-column {
    padding-top: 10px; 
}

.font-style-item {
    margin-bottom: 30px;
}

.font-style-item:last-child {
    margin-bottom: 0;
}

.font-style-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.font-style-label {
    font-family: 'Helvetica Neue Bold', sans-serif;
    font-size: 0.9em;
    color: #FFFFFF; 
    text-transform: uppercase;
}

.font-style-usecase {
    font-family: 'Times New Roman Light', monospace;
    font-size: 0.75em;
    color: #bbbbbb; 
    text-transform: uppercase;
}

.font-style-preview {
    font-size: 1.5em !important; 
    line-height: 1.3;
    color: #ccc !important; /* Changed from #FFFFFF to #ccc (grey) and added !important */
    word-break: break-all; 
    margin-bottom: 0; 
}


.mondwest-regular { font-family: 'Times New Roman Regular', serif !important; }
.mondwest-regular.special-glyphs {
    font-size: 1.5em; /* Slightly smaller for many special characters */
    line-height: 1.5;
    word-break: break-all; /* Ensure long strings of glyphs wrap */
}

.nn-grotesk-bold { font-family: 'Helvetica Neue Bold', sans-serif !important; }
.nn-grotesk-regular { font-family: 'Helvetica Neue Regular', sans-serif !important; }
.nn-mono-light { 
    font-family: 'Times New Roman Light', monospace !important; 
    font-size: 1.3em !important; 
    line-height: 1.4 !important;
}

/* Responsive for new Typography Layout (nested within collapsible) */
@media (max-width: 1024px) { 
    .typography-3col-font-layout { /* Updated class name */
        grid-template-columns: 1fr 0.8fr; 
        grid-template-areas:
            "desc styles"
            "glyph glyph";
        gap: 30px;
    }
    .description-column { grid-area: desc; }
    .glyph-column { 
        grid-area: glyph; 
        min-height: 200px; 
        margin-top: 20px;
    }
    .styles-column { grid-area: styles; }
    .glyph-display-redesigned { font-size: 12em; }
}

@media (max-width: 768px) { 
    .typography-3col-font-layout { /* Updated class name */
        grid-template-columns: 1fr; 
        grid-template-areas:
            "desc"
            "glyph"
            "styles";
    }
    .font-group-header .font-family-title { /* Adjust main PRIMARY/SECONDARY title size on mobile */
        font-size: 2.2em;
    }
    .glyph-display-redesigned { font-size: 10em; }
    .font-style-preview { font-size: 1.3em; }
    .nn-mono-light { font-size: 1.1em !important; }
}

/* Footer */
footer {
    background-color: #1a1a1a; /* Keep slightly lighter dark for footer */
    color: #ccc;
    padding: 30px 0;
    text-align: center;
    margin-top: 40px;
}

footer p {
    margin: 0;
    font-size: 0.9em;
    color: #bbb; /* Keep footer text light grey */
}

/* Responsive */
@media (max-width: 1000px) {
    /* Stack logo items earlier */
    .logo-showcase {
        grid-template-columns: 1fr; /* Force single column */
    }
}

@media (max-width: 768px) {
    body {
        padding-top: 70px;
    }
    header .container {
        flex-direction: column;
        align-items: center;
    }
    .logo-container {
        margin-bottom: 15px;
    }
    header nav ul {
        justify-content: center;
        width: 100%;
    }
    header nav ul li {
        margin: 0 10px;
    }
    h2 {
        font-size: 2em;
    }
    .font-preview.heading-preview {
        font-size: 2.2em;
    }
    .font-preview.subheading-preview {
        font-size: 1.6em;
    }
    /* Stacking rule moved to 1000px breakpoint */
}

@media (max-width: 480px) {
    .logo-showcase,
    .color-palette {
        grid-template-columns: 1fr;
    }
    header nav ul li a {
        font-size: 0.9em;
    }
    h2 {
        font-size: 1.8em;
    }
}

/* Download Buttons */
.download-buttons {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center; /* Align label and buttons vertically */
    gap: 10px;
}

.download-label {
    font-size: 16px; /* Was 0.9em, now 16px */
    color: #FFFFFF; /* Ensure white */
    margin-right: 5px; /* Space between label and first button */
}

.download-btn {
    display: inline-block;
    padding: 8px 20px; /* Adjusted padding */
    background-color: transparent; /* Resting state */
    color: #FFFFFF; /* White text */
    text-decoration: none;
    font-family: 'Times New Roman Light', monospace; /* Changed font */
    font-size: 16px; /* Was 0.9em, now 16px */
    text-transform: uppercase; /* Match example */
    font-weight: normal; /* Regular weight for mono */
    transition: background-color 0.3s ease, color 0.3s ease; /* Updated transition */
    border: none; /* Ensure no border */
    position: relative; /* For pseudo-elements */
    cursor: pointer;
}

/* Corner Brackets - Top-Left & Bottom-Left */
/* .download-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-color: #FA4C14; /* Orange */
/*    border-style: solid;
    border-width: 2px 0 0 2px; /* Top and Left borders */
/*    transition: opacity 0.3s ease;
    opacity: 1;
} */

/* Corner Brackets - Top-Right & Bottom-Right */
/* .download-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-color: #FA4C14; /* Orange */
/*    border-style: solid;
    border-width: 0 2px 2px 0; /* Right and Bottom borders */
/*    transition: opacity 0.3s ease;
    opacity: 1;
} */

/* New 4-Corner Implementation using Gradients */
.download-btn::before,
.font-download-meta-link::before /* Apply to font links too */
{
    content: '';
    position: absolute;
    inset: 0; /* Cover whole area for positioning */
    pointer-events: none; /* Ignore mouse */
    background:
        /* Top Left */
        linear-gradient(#FA4C14, #FA4C14) top left / 10px 2px,
        linear-gradient(#FA4C14, #FA4C14) top left / 2px 10px,
        /* Top Right */
        linear-gradient(#FA4C14, #FA4C14) top right / 10px 2px,
        linear-gradient(#FA4C14, #FA4C14) top right / 2px 10px;
    background-repeat: no-repeat;
    transition: opacity 0.3s ease;
    opacity: 1;
}

.download-btn::after,
.font-download-meta-link::after /* Apply to font links too */
{
    content: '';
    position: absolute;
    inset: 0; /* Cover whole area for positioning */
    pointer-events: none; /* Ignore mouse */
    background:
        /* Bottom Left */
        linear-gradient(#FA4C14, #FA4C14) bottom left / 10px 2px,
        linear-gradient(#FA4C14, #FA4C14) bottom left / 2px 10px,
        /* Bottom Right */
        linear-gradient(#FA4C14, #FA4C14) bottom right / 10px 2px,
        linear-gradient(#FA4C14, #FA4C14) bottom right / 2px 10px;
    background-repeat: no-repeat;
    transition: opacity 0.3s ease;
    opacity: 1;
}

.download-btn:hover {
    background-color: #FA4C14; /* Orange background on hover */
    color: #FFFFFF; /* Ensure white text */
}

/* Hide corner brackets on hover */
.download-btn:hover::before,
.download-btn:hover::after,
.font-download-meta-link:hover::before, /* Hide on font link hover */
.font-download-meta-link:hover::after /* Hide on font link hover */
{
    opacity: 0;
}

/* Invert format buttons for dark theme - Match typography link style */
.download-btn.format-btn {
    /* background-color: #333; */ /* Dark grey background */
    /* color: #f0f0f0; */ /* Light text */
    /* border: 1px solid #555; */ /* REMOVED Grey border */
    background-color: transparent; /* Match typography link */
    color: #FFFFFF; /* Changed to white */
    /* border: 1px solid #555; */ /* Match typography link */
    padding: 5px 10px; /* Match typography link padding */
    font-size: 16px; /* Was 0.75em, now explicitly 16px */
    /* Re-apply mono font if needed, or let it inherit from .download-btn */
    /* font-family: 'Non Natural Mono Light', monospace; */
}

.download-btn.format-btn:hover {
    /* background-color: #555; */ /* Lighter grey on hover */
    /* color: #fff; */ /* White text */
    /* border-color: #777; */
    background-color: #FA4C14; /* Match typography link hover */
    border-color: #FA4C14; /* Match typography link hover */
    color: #fff; /* Match typography link hover */
}

/* Collapsible Sections */
.collapsible-trigger {
    /* cursor: pointer; */ /* Now applied to button */
    /* user-select: none; */ /* Now applied to button */
    /* display: flex; */ /* Removed */
    /* align-items: center; */ /* Removed */
}

/* Style the new trigger button */
.collapsible-trigger.logo-section-trigger,
.collapsible-trigger.font-section-trigger {
    background-color: #FA4C14; /* Orange background */
    border: none;
    color: white; /* White icon */
    padding: 8px 12px; /* Adjust padding */
    border-radius: 4px;
    /* cursor: pointer; */ /* Removed, handled by header */
    transition: background-color 0.2s ease-out;
    font-size: 1em; /* Reset font size if needed */
    line-height: 1; /* Ensure button height is consistent */
    display: flex; /* Center icon */
    align-items: center;
    justify-content: center;
}

.collapsible-trigger.logo-section-trigger:hover,
.collapsible-trigger.font-section-trigger:hover {
    /* background-color: rgba(250, 76, 20, 0.1); */ /* Slight orange background on hover */
    background-color: #d83a0f; /* Darker solid orange on hover */
}

.toggle-icon {
    display: inline-block;
    margin-right: 0; /* Removed margin */
    /* font-weight: bold; */ /* Removed - Mondwest has no bold */
    font-family: 'Times New Roman Regular', serif; /* Use Mondwest for the icon */
    font-size: 1.2em; /* Restored size */
    /* min-width: 1em; */ /* No longer needed */
    text-align: center;
    line-height: 1; /* Ensure icon centers vertically */
    color: white; /* Ensure icon is white */
    transition: transform 0.2s ease-in-out; /* Restored transition */
}

.collapsible-trigger.active .toggle-icon {
    transform: rotate(45deg); /* Restored rotation */
}

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    /* Add some padding when open for spacing */
    /* padding-top: 15px; */ /* Moved to .clearspace-subsection and potentially .font-family-group .collapsible-content children */
}

/* Add padding to the direct children of font collapsible content */
/* .font-family-group > .collapsible-content > div { */ /* REMOVED - Handled by .font-content-grid-wrapper padding-top */
    /* padding-top: 30px; */ /* Add space between header and content when open */
/* } */
/* Reset padding for the meta row as it has its own top margin/border */
/* .font-family-group > .collapsible-content > .font-meta-row { */ /* REMOVED */
    /* padding-top: 0; */
/* } */

/* Target h3 directly within font headers */
#typography .font-group-header h3.font-family-title {
    font-family: 'Helvetica Neue Bold', sans-serif; /* Explicitly confirm */
    font-size: 1.8em; /* Match logo group h3 size */
    line-height: 1.1;
    margin-bottom: 0; /* Ensure no margin */
    color: #FFFFFF !important; /* Ensure white */
    border-bottom: none !important;
}

/* Styles for content within #partner-pairing section */
#partner-pairing .partner-pairing-content { /* Scoping to the new section ID */
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for responsiveness */
    gap: 30px;
    margin-top: 20px; /* Add some space below the H2 */
}

#partner-pairing .partner-pairing-text {
    flex: 2; /* Adjusted flex basis for 40%ish */
    min-width: 300px; /* Minimum width before wrapping */
}

#partner-pairing .partner-pairing-text p {
    margin-bottom: 15px;
    line-height: 1.7;
    font-size: 16px; /* Set to 16px */
    color: #FFFFFF; /* Set text color to white */
}

#partner-pairing .partner-pairing-visuals {
    flex: 3; /* Adjusted flex basis for 60%ish */
    min-width: 300px; /* Minimum width before wrapping */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.partner-svg-demo { /* This class is used by images within partner-pairing-visuals */
    width: 100%;
    border: 1px solid #F2F2F2; /* CORRECTED to explicit hex for white/light-grey border */
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
    background-color: #000000; /* Black background */
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

/* Responsive adjustments for partner pairing content */
@media (max-width: 768px) {
    #partner-pairing .partner-pairing-content {
        flex-direction: column;
    }

    #partner-pairing .partner-pairing-text,
    #partner-pairing .partner-pairing-visuals {
        flex-basis: 100%; /* Full width on smaller screens */
    }
}

/* Responsive adjustments for two-column layouts */
@media (max-width: 768px) {
    .partner-pairing-content,
    .colors-content-wrapper.two-column-layout {
        flex-direction: column;
    }

    .partner-pairing-text,
    .partner-pairing-visuals,
    .colors-swatches-column,
    .colors-text-column {
        flex-basis: 100%;
        max-width: 100%;
    }

    .colors-text-column {
        order: -1; /* Move text (now left/40% column) above swatches on mobile */
    }
}

/* ==================================
   Logo Misuse Section Styles
   ================================== */
#logo-misuse h2 {
    /* Styles for the main H2 if different from global brand-section h2 */
    /* For now, it will inherit global h2 styles */
}

.logo-misuse-content-wrapper.two-column-layout {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for responsiveness */
    gap: 30px; /* Space between columns, can adjust */
    margin-top: 20px; /* Space below the H2 */
}

.logo-misuse-text-column {
    flex: 0 0 30%;
    max-width: 30%;
}

.logo-misuse-text-column p {
    margin-bottom: 1em;
    line-height: 1.7;
    font-size: 16px; /* Set to 16px */
    color: #FFFFFF; /* Set text color to white */
}

.logo-misuse-grid-column {
    flex: 0 0 calc(70% - 30px); /* Adjust for gap */
    max-width: calc(70% - 30px);
}

.misuse-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns */
    gap: 20px;
}

.misuse-item {
    text-align: center;
}

.misuse-image-container {
    background-color: #000000; /* Black background for the SVGs */
    border: 1px solid #F2F2F2; /* White/light-grey border */
    border-radius: 8px; /* Rounded corners like the reference */
    padding: 20px; /* Padding around the SVG */
    margin-bottom: 10px; /* Space between image and caption */
    height: 150px; /* Fixed height, adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
}

.misuse-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.misuse-caption {
    font-family: 'Times New Roman Light', monospace;
    font-size: 0.75em;
    color: #F2F2F2; /* Light grey caption text */
    text-transform: uppercase;
    margin-top: 5px; /* Ensure consistent spacing if padding doesn't cover */
}

/* ==================================
   Color Section Styles
   ================================== */
#colors {
    /* background-color: var(--almost-black); */ /* Optional: if a dark bg is needed for the whole section */
    /* color: var(--grey); */
}

/* Responsive adjustments for two-column layouts */
@media (max-width: 768px) {
    .partner-pairing-content,
    .logo-misuse-content-wrapper.two-column-layout, /* Add logo misuse */
    .colors-content-wrapper.two-column-layout {
        flex-direction: column;
    }

    .partner-pairing-text,
    .partner-pairing-visuals,
    .logo-misuse-text-column, /* Add logo misuse */
    .logo-misuse-grid-column, /* Add logo misuse */
    .colors-swatches-column,
    .colors-text-column {
        flex-basis: 100%;
        max-width: 100%;
    }

    .colors-text-column {
        order: -1; /* Move text (now left/40% column) above swatches on mobile */
    }
    /* For logo misuse, default order (text then grid) is fine on mobile */
    .misuse-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on smaller screens */
    }
}