* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: #FFFFFF;
      color: #1E2B36;
      line-height: 1.6;
    }

    .cabin { font-family: 'Cabin', sans-serif; }

    /* Header */
    header {
      background: white;
      border-bottom: none;
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .header-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem 3rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo-area {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .logo-area h1 {
      font-family: 'Cabin', sans-serif;
      font-size: 1.5rem;
      font-weight: 600;
      color: #1E2B36;
    }

    .logo-area span {
      font-size: 0.8rem;
      color: #8E9EAC;
    }

    /* Navigation */
    nav {
      display: flex;
      gap: 0.25rem;
      flex-wrap: wrap;
      padding: 0 3rem 2rem;
      max-width: 1200px;
      margin: 0 auto;
      border-bottom: 1px solid #EEF0F2;
    }

    /* Mobile horizontal scrollable nav - only on small mobile screens */
    @media (max-width: 600px) {
      nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0 1rem 1rem;
        gap: 0.5rem;
        margin: 0;
        max-width: 100%;
      }

      nav::-webkit-scrollbar {
        display: none;
      }

    }

    .nav-btn {
      padding: 0.625rem 1.25rem;
      border-radius: 8px;
      border: none;
      background: transparent;
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      color: #5F7482;
    }

    .nav-btn:hover {
      background: #F4F6F8;
      color: #1E2B36;
    }

    .nav-btn.active {
      background: #2C98E3;
      color: white;
    }

    /* Main Content */
    main {
      max-width: 1200px;
      margin: 0 auto;
      padding: 3rem;
    }

    section {
      display: none;
    }

    section.active {
      display: block;
    }

    h2 {
      font-family: 'Cabin', sans-serif;
      font-size: 1.75rem;
      margin-bottom: 0.5rem;
    }

    .section-desc {
      color: #5F7482;
      max-width: 800px;
      margin-bottom: 2rem;
    }

    h3 {
      font-size: 1.125rem;
      font-weight: 600;
      margin: 2rem 0 1rem;
      color: #434F5C;
    }

    /* Color Swatches - Joined Rectangle Style */
    .color-strip {
      display: flex;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 1rem;
    }

    .color-strip .color-segment {
      flex: 1;
      height: 80px;
      cursor: pointer;
      transition: all 0.15s ease;
      position: relative;
    }

    .color-strip .color-segment:hover {
      transform: scaleY(1.05);
      z-index: 1;
    }

    .color-labels {
      display: flex;
      margin-bottom: 2rem;
    }

    .color-labels .color-label {
      flex: 1;
      text-align: center;
      cursor: pointer;
    }

    .color-labels .color-label .name {
      font-size: 0.8rem;
      font-weight: 600;
      color: #1E2B36;
      margin-bottom: 0.15rem;
    }

    .color-labels .color-label .hex {
      font-size: 0.7rem;
      font-family: 'Inter', monospace;
      color: #5F7482;
    }

    /* Neutral grays strip */
    .color-strip.neutrals .color-segment {
      height: 60px;
    }

    .color-strip.neutrals .color-segment.light {
      border: 1px solid #EEF0F2;
      border-left: none;
    }

    .color-strip.neutrals .color-segment:first-child.light {
      border-left: 1px solid #EEF0F2;
    }

    /* Tints Grid - Joined Strip Style */
    .tints-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem 3rem;
      margin-top: 1.5rem;
    }

    .tints-group h4 {
      font-size: 0.85rem;
      font-weight: 600;
      color: #1E2B36;
      margin-bottom: 0.75rem;
    }

    .tint-strip {
      display: flex;
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 0.5rem;
    }

    .tint-strip .tint-segment {
      flex: 1;
      height: 48px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .tint-strip .tint-segment:hover {
      transform: scaleY(1.08);
      z-index: 1;
    }

    .tint-labels {
      display: flex;
    }

    .tint-labels .tint-label {
      flex: 1;
      text-align: center;
      cursor: pointer;
    }

    .tint-labels .tint-label .name {
      font-size: 0.65rem;
      font-weight: 600;
      color: #1E2B36;
      margin-bottom: 0.1rem;
      font-family: 'Inter', sans-serif;
    }

    .tint-labels .tint-label .hex {
      font-size: 0.55rem;
      font-family: 'Inter', monospace;
      color: #8E9EAC;
    }

    /* Logo Section */
    .logo-preview {
      background: white;
      border-radius: 16px;
      padding: 2rem;
      border: 1px solid #DEE4E8;
      margin-bottom: 2rem;
    }

    .logo-controls {
      display: flex;
      gap: 2rem;
      flex-wrap: wrap;
      margin-bottom: 1.5rem;
    }

    .control-group {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .control-group label {
      font-size: 0.875rem;
      color: #5F7482;
    }

    .toggle-btn {
      padding: 0.375rem 0.75rem;
      border-radius: 6px;
      border: 1px solid #DEE4E8;
      background: white;
      font-size: 0.8125rem;
      cursor: pointer;
      transition: all 0.2s;
    }

    .toggle-btn:hover {
      background: #F4F6F8;
    }

    .toggle-btn.active {
      background: #2C98E3;
      color: white;
      border-color: #2C98E3;
    }

    .logo-display {
      border-radius: 12px;
      padding: 3rem;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 200px;
      transition: background 0.3s;
    }

    .logo-display.light { background: #F4F6F8; }
    .logo-display.dark { background: #1E2B36; }
    .logo-display.blue { background: #2C98E3; }

    /* Download Section */
    .download-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 1rem;
      margin-top: 1.5rem;
    }

    .download-card {
      background: white;
      border-radius: 12px;
      padding: 1.25rem;
      border: 1px solid #DEE4E8;
      text-align: center;
    }

    .download-card h4 {
      font-size: 0.875rem;
      margin-bottom: 0.5rem;
    }

    .download-card p {
      font-size: 0.75rem;
      color: #8E9EAC;
      margin-bottom: 1rem;
    }

    .download-links {
      display: flex;
      gap: 0.5rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    .download-link {
      padding: 0.375rem 0.75rem;
      border-radius: 6px;
      background: #EBF4FB;
      color: #2C98E3;
      font-size: 0.75rem;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.2s;
    }

    .download-link:hover {
      background: #2C98E3;
      color: white;
    }

    /* Imagery Hero Header Card */
    .imagery-hero {
      background: linear-gradient(135deg, #F8FAFC 0%, #EEF2F7 100%);
      border-radius: 20px;
      padding: 2.5rem;
      margin-bottom: 3rem;
      border: 1px solid #E2E8F0;
    }

    .imagery-hero-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 2rem;
    }

    .imagery-hero-left {
      flex: 1;
    }

    .imagery-hero h2 {
      margin-bottom: 1rem;
      font-size: 2rem;
    }

    .imagery-hero-desc {
      color: #434F5C;
      font-size: 1.0625rem;
      line-height: 1.7;
      max-width: 600px;
      margin-bottom: 1.5rem;
    }

    /* Formula Pills */
    .formula-section {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-wrap: wrap;
    }

    .formula-label {
      font-size: 0.8125rem;
      font-weight: 600;
      color: #8E9EAC;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .formula-pills {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    .formula-pill {
      background: white;
      border: 1px solid #DEE4E8;
      padding: 0.5rem 1rem;
      border-radius: 6px;
      font-size: 0.875rem;
      font-weight: 500;
      color: #1E2B36;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }

    .formula-pill .pill-icon {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .formula-pill .pill-icon.gray {
      background: linear-gradient(135deg, #1E2B36 0%, #8E9EAC 100%);
    }

    .formula-pill .pill-icon.white {
      background: white;
      border: 1.5px solid #DEE4E8;
    }

    .formula-pill .pill-icon.color {
      background: linear-gradient(135deg, #2C98E3 0%, #3FCEA3 50%, #FFD028 100%);
    }

    .image-generator-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: #2C98E3;
      color: white;
      padding: 0.75rem 1.25rem;
      border-radius: 8px;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif;
      font-weight: 500;
      font-size: 0.9375rem;
      letter-spacing: -0.01em;
      text-decoration: none;
      white-space: nowrap;
      transition: all 0.2s ease;
      flex-shrink: 0;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(44, 152, 227, 0.3);
    }

    .image-generator-btn:hover {
      background: #2589d0;
      box-shadow: 0 4px 12px rgba(44, 152, 227, 0.4);
      transform: translateY(-1px);
    }

    .image-generator-btn:active {
      background: #1f7abc;
      transform: translateY(0);
    }

    .image-generator-btn svg {
      flex-shrink: 0;
      transition: transform 0.2s ease;
    }

    .image-generator-btn:hover svg {
      transform: translate(2px, -2px);
    }

    /* Examples Section */
    .examples-section {
      margin-bottom: 3rem;
    }

    .examples-section h3 {
      margin-top: 0;
      margin-bottom: 1.25rem;
    }

    .examples-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.25rem;
    }

    .example-image {
      border-radius: 12px;
      overflow: hidden;
      background: #F4F6F8;
      aspect-ratio: 4/3;
    }

    .example-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Requirements/Restrictions Cards - Enhanced */
    .guidelines-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
      margin-bottom: 3rem;
    }

    .guideline-card {
      background: #FAFBFC;
      border-radius: 16px;
      padding: 1.75rem;
      border: 1px solid #EEF0F2;
    }

    .guideline-card.do {
      border-left: 4px solid #3FCEA3;
      background: linear-gradient(135deg, #F7FCFA 0%, #FAFBFC 100%);
    }

    .guideline-card.dont {
      border-left: 4px solid #FC5E77;
      background: linear-gradient(135deg, #FFFAFA 0%, #FAFBFC 100%);
    }

    .guideline-card h4 {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 1.25rem;
      font-size: 1rem;
    }

    .guideline-card ul {
      list-style: none;
    }

    .guideline-card li {
      font-size: 0.9rem;
      padding: 0.625rem 0;
      padding-left: 1.75rem;
      position: relative;
      color: #434F5C;
    }

    .guideline-card li::before {
      content: '•';
      position: absolute;
      left: 0;
      font-size: 1.25rem;
      line-height: 1;
    }

    .guideline-card.do li::before {
      color: #3FCEA3;
    }

    .guideline-card.dont li::before {
      color: #FC5E77;
    }

    /* Clean Gallery Grid */
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }

    .gallery-item {
      border-radius: 12px;
      overflow: hidden;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      aspect-ratio: 16 / 9;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .gallery-item:hover img {
      transform: scale(1.02);
    }

    .gallery-item img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      transition: transform 0.2s ease;
    }

    @media (max-width: 900px) {
      .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

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

    /* Image Modal */
    .image-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.9);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      cursor: zoom-out;
    }

    .image-modal.active {
      display: flex;
    }

    .image-modal img {
      max-width: 95%;
      max-height: 95vh;
      object-fit: contain;
      border-radius: 8px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    }

    .modal-close {
      position: absolute;
      top: 1.5rem;
      right: 1.5rem;
      width: 48px;
      height: 48px;
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: white;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      transition: background 0.2s ease;
    }

    .modal-close:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .gallery-item {
      cursor: zoom-in;
    }

    /* Image Generator Hero CTA */
    .image-generator-cta {
      background: linear-gradient(135deg, #2C98E3 0%, #1E7BC4 100%);
      border-radius: 20px;
      padding: 2.5rem;
      margin-top: 3rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 2rem;
    }

    .cta-content h3 {
      color: white;
      font-size: 1.5rem;
      margin: 0 0 0.5rem 0;
      font-family: 'Cabin', sans-serif;
    }

    .cta-content p {
      color: rgba(255, 255, 255, 0.85);
      margin: 0;
      font-size: 1rem;
      max-width: 400px;
    }

    .cta-button {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      background: white;
      color: #2C98E3;
      padding: 1rem 1.75rem;
      border-radius: 12px;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif;
      font-weight: 600;
      font-size: 1rem;
      text-decoration: none;
      white-space: nowrap;
      transition: all 0.2s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .cta-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }

    .cta-button:active {
      transform: translateY(0);
    }

    .cta-button svg {
      transition: transform 0.2s ease;
    }

    .cta-button:hover svg {
      transform: translateX(3px);
    }

    @media (max-width: 700px) {
      .imagery-hero {
        padding: 1.75rem;
        border-radius: 16px;
      }

      .imagery-hero-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
      }

      .imagery-hero h2 {
        font-size: 1.5rem;
      }

      .imagery-hero-desc {
        font-size: 1rem;
      }

      .formula-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
      }

      .examples-grid {
        grid-template-columns: repeat(2, 1fr);
      }

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

      .image-generator-cta {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1.5rem;
      }

      .cta-content {
        text-align: center;
      }

      .cta-content p {
        max-width: 100%;
      }
    }

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

      .formula-pills {
        flex-direction: column;
        width: 100%;
      }

      .formula-pill {
        width: 100%;
        justify-content: center;
      }
    }

    /* Typography Section */
    .type-card {
      background: white;
      border-radius: 12px;
      padding: 2rem;
      border: 1px solid #DEE4E8;
      margin-bottom: 1.5rem;
    }

    .type-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 1.5rem;
    }

    .type-badge {
      padding: 0.25rem 0.75rem;
      border-radius: 6px;
      font-size: 0.75rem;
      font-weight: 600;
    }

    .type-badge.primary {
      background: #2C98E3;
      color: white;
    }

    .type-badge.secondary {
      background: #EEF0F2;
      color: #5F7482;
    }

    .type-samples {
      border-top: 1px solid #EEF0F2;
      padding-top: 1.5rem;
      margin-top: 1.5rem;
    }

    /* Tone Section */
    .tone-spectrum {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      margin-bottom: 2rem;
    }

    .tone-card {
      border-radius: 12px;
      padding: 1.5rem;
      border: 2px solid;
    }

    .tone-card.casual {
      background: #FBEFF1;
      border-color: #F8D8DD;
    }

    .tone-card.right {
      background: #EEF9F5;
      border-color: #D6F2E8;
    }

    .tone-card.formal {
      background: #FFF8E5;
      border-color: #FFEFBF;
    }

    .tone-card h4 {
      margin-bottom: 0.75rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .tone-card blockquote {
      font-size: 0.875rem;
      font-style: italic;
      color: #434F5C;
      margin-bottom: 1rem;
      min-height: 60px;
    }

    .trait-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .trait-tag {
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
      font-size: 0.75rem;
      background: white;
    }

    .tone-card.right .trait-tag {
      background: #3FCEA3;
      color: white;
    }

    /* Principle Cards */
    .principles-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }

    .principle-card {
      background: white;
      border-radius: 12px;
      padding: 1.5rem;
      border: 1px solid #DEE4E8;
    }

    .principle-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1rem;
      font-size: 1.5rem;
    }

    /* Name Usage */
    .name-usage {
      background: white;
      border-radius: 12px;
      padding: 2rem;
      border: 1px solid #DEE4E8;
    }

    .name-item {
      display: flex;
      align-items: center;
      padding: 1rem 0;
      border-bottom: 1px solid #EEF0F2;
    }

    .name-item:last-child {
      border-bottom: none;
    }

    .name-status {
      width: 80px;
      font-size: 0.75rem;
      font-weight: 600;
    }

    .name-status.correct {
      color: #3FCEA3;
    }

    .name-status.incorrect {
      color: #FC5E77;
    }

    .name-text {
      font-size: 1.5rem;
      font-family: 'Cabin', sans-serif;
    }

    /* Toast */
    .toast {
      position: fixed;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%) translateY(100px);
      background: #1E2B36;
      color: white;
      padding: 0.75rem 1.5rem;
      border-radius: 8px;
      font-size: 0.875rem;
      opacity: 0;
      transition: all 0.3s;
      z-index: 1000;
    }

    .toast.show {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }

    /* Footer */
    footer {
      background: white;
      color: #1E2B36;
      padding: 3rem 3rem;
      margin-top: 4rem;
      text-align: center;
      border-top: 1px solid #EEF0F2;
    }

    footer p {
      color: #8E9EAC;
      font-size: 0.75rem;
    }

    /* View Toggle Button */
    .view-toggle-btn {
      padding: 0.5rem;
      border-radius: 6px;
      border: none;
      background: transparent;
      color: #8E9EAC;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .view-toggle-btn:hover {
      background: #F4F6F8;
      color: #5F7482;
    }

    .view-toggle-btn svg {
      width: 24px;
      height: 24px;
    }

    /* Single Page Mode */
    body.single-page-mode section {
      display: block !important;
      margin-bottom: 3rem;
      padding-bottom: 3rem;
      border-bottom: 2px solid #DEE4E8;
    }

    body.single-page-mode section:last-of-type {
      border-bottom: none;
    }

    body.single-page-mode nav {
      display: none;
    }

    body.single-page-mode header {
      border-bottom: 1px solid #DEE4E8;
      margin-bottom: 1rem;
    }

    body.single-page-mode #gallery {
      display: block !important;
    }

    body.single-page-mode section h2 {
      padding-top: 1rem;
    }

    body.single-page-mode section:first-of-type {
      margin-top: -1rem;
    }

    /* Logo All Variants Grid - Hidden by default, shown in single-page mode */
    .logo-all-variants {
      display: none;
    }

    body.single-page-mode .logo-interactive {
      display: none;
    }

    body.single-page-mode .logo-all-variants {
      display: block;
    }

    .logo-variants-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-bottom: 2rem;
    }

    .logo-variant-card {
      text-align: center;
    }

    .logo-variant-display {
      border-radius: 12px;
      padding: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 120px;
      margin-bottom: 0.75rem;
      border: 1px solid #DEE4E8;
    }

    .logo-variant-display.light {
      background: #F4F6F8;
    }

    .logo-variant-display.dark {
      background: #1E2B36;
      border-color: #1E2B36;
    }

    .logo-variant-display.blue {
      background: #2C98E3;
      border-color: #2C98E3;
    }

    .logo-variant-label {
      font-size: 0.8rem;
      color: #5F7482;
      margin: 0;
    }

    @media (max-width: 768px) {
      .logo-variants-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
      }
    }

    @media (max-width: 500px) {
      .logo-variants-grid {
        grid-template-columns: 1fr;
      }

      .logo-variant-display {
        min-height: 100px;
        padding: 1.5rem;
      }
    }

    /* Responsive */
    @media (max-width: 900px) {
      .header-inner {
        padding: 1.5rem 1.5rem;
        flex-wrap: wrap;
        gap: 1rem;
      }

      .logo-area {
        flex: 1;
        min-width: 200px;
      }

      nav {
        padding: 0 1.5rem 1.5rem;
        gap: 0.5rem;
      }

      main {
        padding: 2rem 1.5rem;
      }

      .tints-container {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 768px) {
      .tone-spectrum,
      .principles-grid {
        grid-template-columns: 1fr;
      }

      .tints-row {
        flex-wrap: wrap;
      }

      .tint-item {
        min-width: calc(33% - 0.5rem);
      }

      .view-toggle-btn span:last-child {
        display: none;
      }

      /* Color strips responsive - keep horizontal but smaller */
      .color-strip {
        height: 60px;
        border-radius: 8px;
      }

      .color-strip .color-segment {
        height: 60px;
        min-width: 0;
      }

      .color-strip.neutrals {
        flex-wrap: wrap;
        border-radius: 8px;
      }

      .color-strip.neutrals .color-segment {
        height: 40px;
        flex: 1 1 20%;
        min-width: 60px;
      }

      .color-labels {
        flex-wrap: wrap;
      }

      .color-labels .color-label {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0.25rem 0;
      }

      .color-labels.neutrals-labels {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 0.25rem;
      }

      .color-labels.neutrals-labels .color-label {
        min-width: unset;
      }

      .color-labels .color-label .name {
        font-size: 0.6rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .color-labels .color-label .hex {
        font-size: 0.5rem;
      }

      /* Tint strips responsive - keep horizontal but smaller */
      .tint-strip .tint-segment {
        height: 36px;
        min-width: 0;
      }

      .tint-labels .tint-label .name {
        font-size: 0.5rem;
      }

      .tint-labels .tint-label .hex {
        font-size: 0.45rem;
      }

      /* Guidelines grid - single column */
      .guidelines-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 600px) {
      .header-inner {
        padding: 1rem;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
      }

      .logo-area {
        flex: 1;
        min-width: 0;
      }

      .logo-area h1 {
        font-size: 1.1rem;
      }

      .logo-area span {
        font-size: 0.65rem;
        display: block;
        max-width: 180px;
        line-height: 1.3;
      }

      .logo-area svg {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
      }

      .view-toggle-btn {
        flex-shrink: 0;
      }

      .nav-btn {
        padding: 0.5rem 0.875rem;
        font-size: 0.75rem;
        flex-shrink: 0;
        white-space: nowrap;
      }

      main {
        padding: 1.5rem 1rem;
      }

      h2 {
        font-size: 1.5rem;
      }

      h3 {
        font-size: 1rem;
      }

      /* Neutral grays - 2 rows on mobile */
      .color-strip.neutrals {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr);
        border-radius: 8px;
        overflow: hidden;
      }

      .color-strip.neutrals .color-segment {
        height: 50px !important;
        min-width: unset !important;
        flex: unset !important;
      }

      .color-labels.neutrals-labels {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr);
        gap: 0.25rem;
      }

      .color-labels.neutrals-labels .color-label {
        text-align: center;
      }

      .color-labels.neutrals-labels .color-label .name {
        font-size: 0.55rem !important;
      }

      .color-labels.neutrals-labels .color-label .hex {
        font-size: 0.45rem !important;
      }

      /* Example images grid - mobile */
      .examples-grid {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      /* Rejection reasons grid - mobile */
      .rejection-grid {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      /* Gallery header - mobile */
      .gallery-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
      }

      .gallery-upload {
        width: 100%;
        justify-content: center;
      }

      /* Logo preview - mobile */
      .logo-preview {
        padding: 1rem;
      }

      .logo-controls {
        gap: 0.75rem 1rem;
        flex-direction: column;
        align-items: flex-start;
      }

      .control-group {
        flex-wrap: wrap;
      }

      .toggle-btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
      }

      .logo-display {
        padding: 1.5rem 1rem;
        min-height: 120px;
      }

      .logo-display svg {
        max-width: 100%;
        height: auto;
      }

      #logoDownloads {
        margin-top: 1rem;
        padding-top: 1rem;
      }

      .logo-download-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
      }

      .download-links {
        flex-wrap: wrap;
      }

      /* Type card - mobile */
      .type-card {
        padding: 1rem;
      }

      .type-header {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start !important;
      }

      .type-card p[style*="font-size: 2.5rem"] {
        font-size: 1.75rem !important;
      }

      .type-card p[style*="font-size: 2rem"] {
        font-size: 1.5rem !important;
      }

      .type-card p[style*="font-size: 1.75rem"] {
        font-size: 1.25rem !important;
      }

      .type-card p[style*="font-size: 1.25rem"] {
        font-size: 1rem !important;
      }

      /* Product badge section - mobile */
      .product-badge-section {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        padding: 0.75rem 1rem !important;
      }

      /* Name usage - mobile */
      .name-usage {
        padding: 1rem;
      }

      .name-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
      }

      .name-status {
        width: auto;
      }

      .name-text {
        font-size: 1.25rem;
      }

      /* Tone cards - mobile */
      .tone-card blockquote {
        min-height: auto;
        font-size: 0.8rem;
      }

      .trait-tags {
        gap: 0.35rem;
      }

      .trait-tag {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
      }

      /* Principle cards - mobile */
      .principle-card p {
        font-size: 0.8rem;
      }

      footer {
        padding: 2rem 1rem;
      }

      footer svg {
        width: 140px;
        height: auto;
      }
    }

    @media (max-width: 400px) {
      .header-inner {
        gap: 0.75rem;
      }

      .logo-area {
        gap: 8px !important;
      }

      .logo-area h1 {
        font-size: 1rem;
      }

      .logo-area span {
        font-size: 0.6rem;
        max-width: 140px;
      }

      .logo-area svg {
        width: 28px;
        height: 28px;
      }

      .nav-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.7rem;
      }

      .examples-grid {
        grid-template-columns: 1fr !important;
      }

      .rejection-grid {
        grid-template-columns: 1fr !important;
      }

      .tone-card h4 {
        font-size: 0.85rem;
      }

      .tone-card blockquote {
        font-size: 0.75rem;
      }

      .principle-icon {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
      }

      .principle-card h4 {
        font-size: 1rem;
      }

      /* Color strips on very small screens */
      .color-strip .color-segment {
        height: 50px;
      }

      .color-labels .color-label .name {
        font-size: 0.5rem;
      }

      .color-labels .color-label .hex {
        font-size: 0.45rem;
      }
    }

    /* Golden Rule Callout */
    .golden-rule {
      background: white;
      border: 1px solid #FFD028;
      border-radius: 16px;
      padding: 2rem;
      margin-top: 2rem;
    }

    .golden-rule-badge {
      font-family: 'Cabin', sans-serif;
      font-size: 1.25rem;
      font-weight: 700;
      color: #1E2B36;
      margin-bottom: 0.5rem;
    }

    .golden-rule blockquote {
      font-size: 1rem;
      font-weight: 400;
      color: #5F7482;
      margin: 0;
      line-height: 1.6;
    }

    @media (max-width: 600px) {
      .golden-rule {
        padding: 2rem 1.5rem;
      }

      .golden-rule blockquote {
        font-size: 1.25rem;
      }
    }

    /* Print Styles */
    @media print {
      * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
      }

      body {
        background: white !important;
        font-size: 10px !important;
      }

      header {
        position: relative !important;
        border-bottom: 1px solid #DEE4E8 !important;
        padding: 0.25rem 0 !important;
        margin-bottom: 0 !important;
      }

      .header-inner {
        padding: 0.5rem 1rem !important;
        flex-direction: row !important;
      }

      .logo-area {
        gap: 10px !important;
      }

      .logo-area svg {
        width: 28px !important;
        height: 28px !important;
      }

      .logo-area h1 {
        font-size: 0.9rem !important;
      }

      .logo-area span {
        font-size: 0.65rem !important;
      }

      nav, .view-toggle-btn, .toast, .gallery-upload, #galleryUpload {
        display: none !important;
      }

      main {
        padding: 0.5rem 1rem !important;
      }

      section {
        display: block !important;
        margin-bottom: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        border-bottom: 1px solid #DEE4E8;
        page-break-inside: auto;
      }

      section:last-of-type {
        border-bottom: none !important;
      }

      section h2 {
        font-size: 1.1rem !important;
        margin-bottom: 0.25rem !important;
        page-break-after: avoid;
      }

      section h3 {
        font-size: 0.85rem !important;
        margin: 0.75rem 0 0.4rem !important;
        page-break-after: avoid;
      }

      .section-desc {
        margin-bottom: 0.75rem !important;
        font-size: 0.75rem !important;
      }

      /* Logo Section Print - Show all variants grid, hide interactive */
      .logo-interactive {
        display: none !important;
      }

      .logo-all-variants {
        display: block !important;
      }

      .logo-variants-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.75rem !important;
      }

      .logo-variant-card {
        page-break-inside: avoid;
      }

      .logo-variant-display {
        min-height: 70px !important;
        padding: 1rem !important;
        border-radius: 8px !important;
      }

      .logo-variant-display svg {
        max-width: 140px !important;
        height: auto !important;
      }

      .logo-variant-label {
        font-size: 0.6rem !important;
        margin-top: 0.25rem !important;
      }

      #logoDownloads {
        display: none !important;
      }

      .name-usage {
        padding: 0.75rem !important;
        margin-bottom: 1rem !important;
      }

      .name-item {
        padding: 0.5rem 0 !important;
      }

      .name-status {
        font-size: 0.65rem !important;
        width: 60px !important;
      }

      .name-text {
        font-size: 1.1rem !important;
      }

      /* Color System Print */
      .color-strip {
        height: 50px !important;
        margin-bottom: 0.5rem !important;
        border-radius: 8px !important;
      }

      .color-strip .color-segment {
        height: 50px !important;
      }

      .color-strip.neutrals .color-segment {
        height: 40px !important;
      }

      .color-labels {
        margin-bottom: 1rem !important;
      }

      .color-labels .color-label .name {
        font-size: 0.6rem !important;
      }

      .color-labels .color-label .hex {
        font-size: 0.5rem !important;
      }

      .tints-container {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.75rem 1rem !important;
      }

      .tints-group {
        page-break-inside: avoid;
      }

      .tints-group h4 {
        font-size: 0.6rem !important;
        margin-bottom: 0.25rem !important;
      }

      .tint-strip {
        height: 32px !important;
        margin-bottom: 0.25rem !important;
      }

      .tint-strip .tint-segment {
        height: 32px !important;
      }

      .tint-labels .tint-label .name {
        font-size: 0.5rem !important;
      }

      .tint-labels .tint-label .hex {
        font-size: 0.45rem !important;
      }

      /* Guidelines Grid Print */
      .guidelines-grid {
        gap: 0.5rem !important;
      }

      .guideline-card {
        padding: 0.6rem !important;
        page-break-inside: avoid;
      }

      .guideline-card h4 {
        font-size: 0.75rem !important;
        margin-bottom: 0.4rem !important;
      }

      .guideline-card li {
        font-size: 0.65rem !important;
        padding: 0.2rem 0 !important;
      }

      /* Typography Print */
      .type-card {
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        page-break-inside: avoid;
      }

      .type-header {
        margin-bottom: 0.75rem !important;
      }

      .type-badge {
        font-size: 0.6rem !important;
        padding: 0.15rem 0.5rem !important;
      }

      .type-samples {
        padding-top: 0.75rem !important;
        margin-top: 0.75rem !important;
      }

      /* Tone of Voice Print */
      .tone-spectrum {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
      }

      .tone-card {
        padding: 0.6rem !important;
        page-break-inside: avoid;
      }

      .tone-card h4 {
        font-size: 0.7rem !important;
        margin-bottom: 0.4rem !important;
      }

      .tone-card blockquote {
        font-size: 0.65rem !important;
        min-height: auto !important;
        margin-bottom: 0.5rem !important;
      }

      .trait-tag {
        font-size: 0.55rem !important;
        padding: 0.15rem 0.3rem !important;
      }

      .principles-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
      }

      .principle-card {
        padding: 0.6rem !important;
        page-break-inside: avoid;
      }

      .principle-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.9rem !important;
        margin-bottom: 0.4rem !important;
        border-radius: 6px !important;
      }

      .principle-card h4 {
        font-size: 0.75rem !important;
        margin-bottom: 0.25rem !important;
      }

      .principle-card p {
        font-size: 0.65rem !important;
      }

      /* Imagery Section Print */
      .examples-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.5rem !important;
        margin-bottom: 1rem !important;
      }

      .examples-grid > div {
        border-radius: 6px !important;
      }

      .imagery-header {
        margin-bottom: 1rem !important;
      }

      .image-generator-btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.7rem !important;
        border-radius: 6px !important;
      }

      .image-generator-btn svg {
        width: 16px !important;
        height: 16px !important;
      }

      .rejection-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.5rem !important;
      }

      .rejection-grid > div {
        padding: 0.75rem !important;
        border-radius: 8px !important;
      }

      .rejection-grid > div > div:first-child {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
        margin-bottom: 0.4rem !important;
      }

      .rejection-grid h4 {
        font-size: 0.7rem !important;
        margin-bottom: 0.15rem !important;
      }

      .rejection-grid p {
        font-size: 0.6rem !important;
      }

      /* Template Gallery Print */
      #gallery {
        display: block !important;
      }

      .gallery-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.75rem !important;
      }

      .gallery-item {
        aspect-ratio: auto !important;
        page-break-inside: avoid;
      }

      .gallery-item img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
      }

      /* Footer Print */
      footer {
        padding: 0.75rem 1rem !important;
        margin-top: 0.5rem !important;
        border-top: 1px solid #DEE4E8 !important;
      }

      footer a {
        display: inline-block !important;
        margin-bottom: 0.5rem !important;
      }

      footer svg {
        width: 120px !important;
        height: auto !important;
      }

      footer p {
        font-size: 0.7rem !important;
        margin: 0 !important;
      }

      a[href]::after {
        content: none !important;
      }
    }