/* ═══════════════════════════════════════════════════════════════
   VESSEL PROGRAM CONFIGURATOR — Styles
   ═══════════════════════════════════════════════════════════════ */

/* ─── Full-width override & dark background for configurator page ─── */
body:has(.v-configurator),
.v-configurator-active {
   background: var(--v-navy) !important;
}

body:has(.v-configurator) .global-main,
.v-configurator-active .global-main {
   max-width: none !important;
   margin-left: 0 !important;
   margin-right: 0 !important;
}

/* ─── Base ─── */
.v-configurator {
   font-family: var(--v-font-body);
   color: var(--v-white);
   min-height: 80vh;
   background: linear-gradient(165deg, var(--v-navy) 0%, var(--v-navy-light) 40%, var(--v-navy-mid) 100%);
   background-attachment: fixed;
}

.v-cfg-noscript {
   text-align: center;
   padding: 120px 24px;
   color: var(--v-white);
}

/* ─── Feedback Mode Banner ─── */
.v-cfg-review-banner {
   background: #F5A623;
   color: #1A1A2E;
   text-align: center;
   padding: 8px 16px;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.5px;
   position: sticky;
   top: 60px;
   z-index: 90;
}

/* ─── Coming Soon (feature disabled) ─── */
.v-cfg-coming-soon {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 70vh;
   text-align: center;
   padding: 60px 24px;
}
.v-cfg-coming-soon h2 {
   font-family: var(--v-font-display);
   font-size: 42px;
   font-weight: 400;
   margin-bottom: 16px;
}
.v-cfg-coming-soon p {
   font-size: 18px;
   opacity: 0.7;
   max-width: 480px;
}

/* ─── Progress Bar ─── */
.v-cfg-progress {
   display: flex;
   gap: 8px;
   max-width: 400px;
   margin: 0 auto 48px;
   padding: 0 24px;
}
.v-cfg-progress-seg {
   flex: 1;
   height: 3px;
   background: rgba(255, 255, 255, 0.15);
   border-radius: 2px;
   transition: background 0.4s ease;
}
.v-cfg-progress-seg.active {
   background: var(--v-teal);
}
.v-cfg-progress-seg.completed {
   background: var(--v-teal-light);
}

/* ─── Step Container ─── */
.v-cfg-step {
   max-width: 720px;
   margin: 0 auto;
   padding: 80px 24px 60px;
   min-height: 60vh;
   display: flex;
   flex-direction: column;
}
.v-cfg-step-header {
   text-align: center;
   margin-bottom: 48px;
}
.v-cfg-step-label {
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: var(--v-teal);
   margin-bottom: 12px;
}
.v-cfg-step-title {
   font-family: var(--v-font-display);
   font-size: 36px;
   font-weight: 400;
   line-height: 1.2;
   margin-bottom: 12px;
}
.v-cfg-step-subtitle {
   font-size: 16px;
   opacity: 0.65;
   max-width: 520px;
   margin: 0 auto;
   line-height: 1.6;
}

/* ─── Option Cards (single-select) ─── */
.v-cfg-options {
   display: flex;
   flex-direction: column;
   gap: 12px;
   flex: 1;
}
.v-cfg-card {
   background: var(--v-navy-light);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 8px;
   padding: 24px 28px;
   cursor: pointer;
   transition: all 0.25s ease;
   position: relative;
}
.v-cfg-card:hover {
   border-color: var(--v-teal-border);
   background: var(--v-navy-mid);
}
.v-cfg-card.selected {
   border-color: var(--v-teal);
   background: var(--v-navy-mid);
   box-shadow: 0 0 0 1px var(--v-teal), 0 0 20px rgba(26, 143, 143, 0.1);
}
.v-cfg-card-title {
   font-size: 17px;
   font-weight: 600;
   margin-bottom: 6px;
}
.v-cfg-card-desc {
   font-size: 14px;
   opacity: 0.6;
   line-height: 1.5;
}

/* ─── Module Cards (multi-select) ─── */
.v-cfg-modules {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
   flex: 1;
}
.v-cfg-module {
   background: var(--v-navy-light);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 8px;
   padding: 20px 24px;
   cursor: pointer;
   transition: all 0.25s ease;
   position: relative;
}
.v-cfg-module:hover {
   border-color: var(--v-teal-border);
}
.v-cfg-module.selected {
   border-color: var(--v-teal);
   box-shadow: 0 0 0 1px var(--v-teal);
}
.v-cfg-module-check {
   position: absolute;
   top: 12px;
   right: 12px;
   width: 22px;
   height: 22px;
   border: 2px solid rgba(255, 255, 255, 0.2);
   border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   transition: all 0.2s ease;
}
.v-cfg-module.selected .v-cfg-module-check {
   background: var(--v-teal);
   border-color: var(--v-teal);
   color: var(--v-white);
}
.v-cfg-module-name {
   font-size: 15px;
   font-weight: 600;
   margin-bottom: 6px;
   padding-right: 28px;
}
.v-cfg-module-desc {
   font-size: 13px;
   opacity: 0.55;
   line-height: 1.5;
}

/* ─── Sub-options (disease selector) ─── */
.v-cfg-suboptions {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 12px;
   padding-top: 12px;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.v-cfg-suboption {
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 20px;
   padding: 6px 16px;
   font-size: 13px;
   cursor: pointer;
   transition: all 0.2s ease;
}
.v-cfg-suboption:hover {
   border-color: var(--v-teal-border);
}
.v-cfg-suboption.selected {
   background: var(--v-teal);
   border-color: var(--v-teal);
   color: var(--v-white);
}

/* ─── Scope Selectors (Step 3) ─── */
.v-cfg-scope {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px;
   flex: 1;
}
.v-cfg-field {
   display: flex;
   flex-direction: column;
   gap: 8px;
}
.v-cfg-field-label {
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   color: var(--v-teal);
}
.v-cfg-select {
   background: var(--v-navy-light);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 6px;
   padding: 14px 16px;
   color: var(--v-white);
   font-family: var(--v-font-body);
   font-size: 15px;
   appearance: none;
   cursor: pointer;
   transition: border-color 0.2s ease;
}
.v-cfg-select:focus {
   outline: none;
   border-color: var(--v-teal);
}
.v-cfg-select option {
   background: var(--v-navy);
   color: var(--v-white);
}

/* ─── Contact Fields (Step 4) ─── */
.v-cfg-contact {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   flex: 1;
   align-content: start;
}
.v-cfg-contact .v-cfg-field.full-width {
   grid-column: 1 / -1;
}
.v-cfg-input,
.v-configurator .v-cfg-input {
   background: var(--v-navy-light);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 6px;
   padding: 14px 16px;
   color: #fff;
   color: var(--v-white, #fff);
   font-family: var(--v-font-body);
   font-size: 15px;
   transition: border-color 0.2s ease;
}
.v-cfg-input::placeholder {
   color: rgba(255, 255, 255, 0.3);
}
.v-cfg-input:focus,
.v-cfg-input:active {
   outline: none;
   border-color: var(--v-teal);
   color: #fff;
   color: var(--v-white, #fff);
}

/* ─── Navigation Buttons ─── */
.v-cfg-nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 48px;
   padding-top: 24px;
   border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.v-cfg-btn {
   font-family: var(--v-font-body);
   font-size: 14px;
   font-weight: 600;
   padding: 14px 32px;
   border-radius: 6px;
   border: none;
   cursor: pointer;
   transition: all 0.2s ease;
   letter-spacing: 0.3px;
}
.v-cfg-btn-primary {
   background: var(--v-teal);
   color: var(--v-white);
}
.v-cfg-btn-primary:hover {
   background: var(--v-teal-light);
}
.v-cfg-btn-primary:disabled {
   opacity: 0.4;
   cursor: not-allowed;
}
.v-cfg-btn-secondary {
   background: transparent;
   color: var(--v-white);
   opacity: 0.6;
}
.v-cfg-btn-secondary:hover {
   opacity: 1;
}
.v-cfg-btn-generate {
   background: var(--v-teal);
   color: var(--v-white);
   font-size: 16px;
   padding: 16px 40px;
   width: 100%;
   margin-top: 32px;
}
.v-cfg-btn-generate:hover:not(:disabled) {
   background: var(--v-teal-light);
}
.v-cfg-btn-generate:disabled {
   background: rgba(255, 255, 255, 0.08);
   color: rgba(255, 255, 255, 0.25);
   cursor: not-allowed;
}
.v-cfg-validation {
   color: var(--v-coral);
   font-size: 13px;
   text-align: center;
   margin-top: 8px;
   min-height: 20px;
}

/* ─── Proposal Output ─── */
.v-cfg-proposal {
   max-width: 900px;
   margin: 0 auto;
   padding: 80px 24px 60px;
}
.v-cfg-proposal-header {
   text-align: center;
   margin-bottom: 40px;
}
.v-cfg-proposal-title {
   font-family: var(--v-font-display);
   font-size: 36px;
   font-weight: 400;
   margin-bottom: 8px;
}
.v-cfg-proposal-org {
   font-size: 16px;
   opacity: 0.6;
}

/* ─── Tab Bar ─── */
.v-cfg-tabs {
   display: flex;
   gap: 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   margin-bottom: 40px;
}
.v-cfg-tab {
   font-family: var(--v-font-body);
   font-size: 14px;
   font-weight: 600;
   padding: 14px 24px;
   background: none;
   border: none;
   color: var(--v-white);
   opacity: 0.5;
   cursor: pointer;
   border-bottom: 2px solid transparent;
   transition: all 0.2s ease;
   white-space: nowrap;
}
.v-cfg-tab:hover {
   opacity: 0.8;
}
.v-cfg-tab.active {
   opacity: 1;
   border-bottom-color: var(--v-teal);
   color: var(--v-teal-light);
}

/* ─── Proposal Content ─── */
.v-cfg-view {
   display: none;
   animation: v-cfg-fadeIn 0.3s ease;
}
.v-cfg-view.active {
   display: block;
}
@keyframes v-cfg-fadeIn {
   from { opacity: 0; transform: translateY(8px); }
   to { opacity: 1; transform: translateY(0); }
}

.v-cfg-section {
   margin-bottom: 40px;
}
.v-cfg-section-label {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--v-teal);
   margin-bottom: 16px;
}
.v-cfg-section h3 {
   font-family: var(--v-font-display);
   font-size: 28px;
   font-weight: 400;
   margin-bottom: 16px;
   line-height: 1.3;
}
.v-cfg-section p {
   font-size: 16px;
   line-height: 1.8;
   opacity: 0.8;
   margin-bottom: 12px;
}
.v-cfg-section ul {
   list-style: none;
   padding: 0;
   margin: 0;
}
.v-cfg-section ul li {
   padding: 8px 0 8px 24px;
   position: relative;
   font-size: 16px;
   line-height: 1.6;
   opacity: 0.8;
}
.v-cfg-section ul li::before {
   content: '◆';
   position: absolute;
   left: 0;
   color: var(--v-teal);
   font-size: 8px;
   top: 13px;
}

/* ─── Divider ─── */
.v-cfg-divider {
   border: none;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   margin: 40px 0;
}

/* ─── Value Stack Table ─── */
.v-cfg-value-table {
   width: 100%;
   border-collapse: collapse;
   margin: 16px 0;
}
.v-cfg-value-table th {
   text-align: left;
   font-size: 12px;
   font-weight: 600;
   white-space: nowrap;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--v-teal);
   padding: 12px 16px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.v-cfg-value-table td {
   padding: 14px 16px;
   font-size: 15px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.04);
   opacity: 0.8;
}
.v-cfg-value-table tr:last-child td {
   border-bottom: none;
}

/* ─── Investment Highlight ─── */
.v-cfg-investment {
   background: var(--v-navy-light);
   border: 1px solid var(--v-teal-border);
   border-radius: 8px;
   padding: 28px 32px;
   text-align: center;
   margin: 24px 0;
}
.v-cfg-investment-range {
   font-family: var(--v-font-display);
   font-size: 32px;
   color: var(--v-teal-light);
   margin-bottom: 8px;
}
.v-cfg-investment-note {
   font-size: 14px;
   opacity: 0.5;
}

/* ─── Testimonial ─── */
.v-cfg-testimonial {
   border-left: 3px solid var(--v-teal);
   padding: 16px 24px;
   margin: 24px 0;
   font-style: italic;
   opacity: 0.75;
}
.v-cfg-testimonial-author {
   font-style: normal;
   font-size: 13px;
   font-weight: 600;
   margin-top: 12px;
   color: var(--v-teal-light);
}

/* ─── Action Bar ─── */
.v-cfg-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 48px;
   padding-top: 24px;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.v-cfg-actions .v-cfg-btn {
   font-size: 13px;
   padding: 12px 24px;
}
.v-cfg-consent {
   margin: 24px 0 16px;
   padding: 16px;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 8px;
}
.v-cfg-consent-label {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   cursor: pointer;
   font-size: 13px;
   line-height: 1.6;
   color: rgba(255, 255, 255, 0.6);
}
.v-cfg-consent-label a {
   color: var(--v-teal-light);
   text-decoration: underline;
}
.v-cfg-checkbox {
   margin-top: 3px;
   flex-shrink: 0;
   width: 16px;
   height: 16px;
   accent-color: var(--v-teal);
}
.v-cfg-testimonial-headline {
   font-size: 14px;
   font-weight: 600;
   color: var(--v-teal-light);
   margin-bottom: 8px;
   letter-spacing: 0.5px;
}
.v-cfg-proposal-footer {
   margin-top: 24px;
   margin-bottom: 48px;
   padding: 20px;
   background: rgba(255, 255, 255, 0.02);
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: 8px;
   font-size: 13px;
   line-height: 1.7;
   color: rgba(255, 255, 255, 0.4);
}
.v-cfg-proposal-footer p {
   margin: 0 0 10px;
}
.v-cfg-proposal-footer p:last-child {
   margin-bottom: 0;
}
.v-cfg-proposal-footer strong {
   color: rgba(255, 255, 255, 0.5);
}
.v-cfg-btn-outline {
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: var(--v-white);
}
.v-cfg-btn-outline:hover {
   border-color: var(--v-teal);
   color: var(--v-teal-light);
}

/* ─── Feedback Mode ─── */
.v-cfg-feedback-toggle {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 13px;
   color: #F5A623;
   cursor: pointer;
   margin-top: 12px;
   opacity: 0.7;
   background: none;
   border: none;
   font-family: var(--v-font-body);
   padding: 0;
}
.v-cfg-feedback-toggle:hover {
   opacity: 1;
}
.v-cfg-feedback-area {
   display: none;
   margin-top: 12px;
}
.v-cfg-feedback-area.open {
   display: block;
}
.v-cfg-feedback-textarea {
   width: 100%;
   min-height: 80px;
   background: rgba(245, 166, 35, 0.08);
   border: 1px solid rgba(245, 166, 35, 0.3);
   border-radius: 6px;
   padding: 12px;
   color: var(--v-white);
   font-family: var(--v-font-body);
   font-size: 14px;
   resize: vertical;
}
.v-cfg-feedback-textarea::placeholder {
   color: rgba(245, 166, 35, 0.4);
}
.v-cfg-feedback-textarea:focus {
   outline: none;
   border-color: #F5A623;
}

/* ─── Feedback Export Panel ─── */
.v-cfg-feedback-float {
   position: fixed;
   bottom: 24px;
   right: 24px;
   z-index: 80;
}
.v-cfg-feedback-export {
   background: #F5A623;
   color: #1A1A2E;
   font-family: var(--v-font-body);
   font-size: 13px;
   font-weight: 700;
   padding: 12px 20px;
   border: none;
   border-radius: 24px;
   cursor: pointer;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   transition: transform 0.2s ease;
}
.v-cfg-feedback-export:hover {
   transform: translateY(-2px);
}

/* ─── Copied Toast ─── */
.v-cfg-toast {
   position: fixed;
   bottom: 80px;
   left: 50%;
   transform: translateX(-50%) translateY(8px);
   background: #1A8F8F;
   color: #fff;
   padding: 14px 28px;
   border-radius: 10px;
   font-family: 'DM Sans', sans-serif;
   font-size: 14px;
   font-weight: 600;
   z-index: 9999;
   opacity: 0;
   transition: opacity 0.3s ease, transform 0.3s ease;
   pointer-events: none;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.v-cfg-toast.visible {
   opacity: 1;
   transform: translateX(-50%) translateY(0);
}

/* ─── Schedule Table ─── */
.v-cfg-schedule {
   width: 100%;
   border-collapse: collapse;
   margin: 16px 0;
}
.v-cfg-schedule-day {
   font-family: var(--v-font-display);
   font-size: 22px;
   padding: 20px 0 8px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   color: var(--v-teal-light);
}
.v-cfg-schedule td {
   padding: 12px 16px;
   font-size: 15px;
   vertical-align: top;
   border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.v-cfg-schedule-time {
   white-space: nowrap;
   opacity: 0.5;
   width: 100px;
}
.v-cfg-schedule-session {
   font-weight: 600;
}
.v-cfg-schedule-detail {
   font-size: 14px;
   opacity: 0.6;
   margin-top: 4px;
   line-height: 1.5;
}

/* ─── Non-binding Notice ─── */
.v-cfg-notice {
   background: var(--v-teal-muted);
   border: 1px solid var(--v-teal-border);
   border-radius: 8px;
   padding: 20px 24px;
   font-size: 14px;
   text-align: center;
   opacity: 0.8;
   margin: 32px 0;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
   .v-cfg-step {
      padding: 60px 20px 40px;
   }
   .v-cfg-step-title {
      font-size: 28px;
   }
   .v-cfg-modules {
      grid-template-columns: 1fr;
   }
   .v-cfg-scope {
      grid-template-columns: 1fr;
   }
   .v-cfg-contact {
      grid-template-columns: 1fr;
   }
   .v-cfg-tabs {
      overflow-x: auto;
   }
   .v-cfg-proposal {
      padding: 60px 20px 40px;
   }
   .v-cfg-proposal-title {
      font-size: 28px;
   }
   .v-cfg-actions {
      flex-direction: column;
   }
}

/* ─── Print Styles ─── */
@media print {
   /* Hide non-print elements */
   .v-nav,
   .v-footer,
   .v-cfg-tabs,
   .v-cfg-actions,
   .v-cfg-review-banner,
   .v-cfg-example-banner,
   .v-cfg-feedback-toggle,
   .v-cfg-feedback-area,
   .v-cfg-feedback-float,
   .v-cfg-toast,
   .v-film-grain,
   .v-grain-svg {
      display: none !important;
   }

   /* Kill ALL dark backgrounds for print */
   body,
   body.global-hash-dark-version,
   .global-wrap,
   .global-content,
   .global-main {
      background: white !important;
      background-color: white !important;
      background-image: none !important;
      color: #1A1A2E !important;
   }

   .v-configurator {
      background: white !important;
      background-color: white !important;
      background-image: none !important;
      color: #1A1A2E !important;
   }

   .v-cfg-proposal,
   .v-cfg-proposal-header,
   .v-cfg-view,
   .v-cfg-view.active,
   .v-cfg-section {
      background: white !important;
      background-color: white !important;
      background-image: none !important;
   }

   .v-cfg-proposal {
      max-width: none;
      padding: 0;
      box-shadow: none !important;
   }

   .v-cfg-proposal-header {
      padding: 40px 24px 24px !important;
   }
   .v-cfg-proposal-title {
      color: #0B1A2E !important;
   }
   .v-cfg-proposal-org {
      color: #555 !important;
   }

   /* Kill separator decorative elements */
   .v-cfg-section + hr,
   hr {
      border-color: #ddd !important;
      opacity: 1 !important;
   }

   /* Show active view only */
   .v-cfg-view {
      display: none !important;
   }
   .v-cfg-view.active {
      display: block !important;
   }

   /* Typography for print */
   .v-cfg-section p,
   .v-cfg-section ul li {
      opacity: 1;
      color: #333 !important;
   }
   .v-cfg-section ul li::before {
      color: #1A8F8F !important;
   }
   .v-cfg-section-label {
      color: #1A8F8F !important;
   }
   .v-cfg-section h3 {
      color: #0B1A2E !important;
   }

   /* Tables */
   .v-cfg-value-table {
      table-layout: auto !important;
   }
   .v-cfg-value-table th {
      color: #1A8F8F !important;
      background: transparent !important;
      background-color: transparent !important;
      min-width: 110px !important;
      white-space: nowrap !important;
   }
   .v-cfg-value-table td {
      opacity: 1;
      color: #333 !important;
   }
   .v-cfg-value-table td,
   .v-cfg-value-table th {
      border-bottom-color: #ddd !important;
   }

   /* Investment box */
   .v-cfg-investment {
      border-color: #1A8F8F !important;
      background: #f5fafa !important;
   }
   .v-cfg-investment-range {
      color: #1A8F8F !important;
   }
   .v-cfg-investment-note {
      color: #555 !important;
   }

   /* Testimonials */
   .v-cfg-testimonial {
      border-left-color: #1A8F8F !important;
      opacity: 1;
      color: #333 !important;
   }
   .v-cfg-testimonial-author {
      color: #1A8F8F !important;
   }

   /* Notice */
   .v-cfg-notice {
      background: #f5fafa !important;
      border-color: #1A8F8F !important;
      opacity: 1;
      color: #333 !important;
   }

   /* ─── Graphics: Impact Diagram ─── */
   .v-gfx-impact {
      background: transparent !important;
      background-color: transparent !important;
      background-image: none !important;
      border: 1px solid #ddd !important;
      border-radius: 8px !important;
   }
   .v-gfx-impact-card {
      background: white !important;
      background-color: white !important;
      background-image: none !important;
      border-bottom: 1px solid #eee;
   }
   .v-gfx-impact-card:nth-child(odd) {
      border-right: 1px solid #eee;
   }
   .v-gfx-impact-card-icon {
      color: #1A8F8F !important;
   }
   .v-gfx-impact-card-label {
      color: #0B1A2E !important;
   }
   .v-gfx-impact-card-desc {
      color: #555 !important;
   }

   /* ─── Graphics: Phase Timeline ─── */
   .v-gfx-timeline {
      background: transparent !important;
      border: 1px solid #ddd !important;
   }
   .v-gfx-timeline-node {
      background: #1A8F8F !important;
      color: white !important;
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
   }
   .v-gfx-timeline-connector {
      background: #1A8F8F !important;
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
   }
   .v-gfx-timeline-title {
      color: #0B1A2E !important;
   }
   .v-gfx-timeline-duration {
      color: #1A8F8F !important;
   }
   .v-gfx-timeline-desc {
      color: #555 !important;
   }

   /* ─── Graphics: Module Pipeline ─── */
   .v-gfx-pipeline {
      background: transparent !important;
      border: 1px solid #ddd !important;
   }
   .v-gfx-pipeline-label {
      color: #999 !important;
   }
   .v-gfx-pipeline-card {
      background: #f5fafa !important;
      border-color: #cde8e8 !important;
   }
   .v-gfx-pipeline-num {
      background: #1A8F8F !important;
      color: white !important;
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
   }
   .v-gfx-pipeline-name {
      color: #0B1A2E !important;
   }

   /* Page breaks */
   .v-cfg-page-break {
      page-break-before: always;
   }

   /* Prevent orphaned graphics */
   .v-gfx-impact,
   .v-gfx-timeline,
   .v-gfx-pipeline {
      break-inside: avoid;
   }

   /* Ensure links are visible */
   a {
      color: #1A8F8F !important;
   }
}

/* ═══════════════════════════════════════════════════════════════
   INTRO SCREEN (Step 0) — "See what a Vessel program looks like"
   ═══════════════════════════════════════════════════════════════ */

.v-cfg-intro {
   max-width: 820px;
   margin: 0 auto;
   padding: 80px 24px 100px;
   text-align: center;
}

.v-cfg-intro-header {
   margin-bottom: 56px;
}

.v-cfg-intro-headline {
   font-family: var(--v-font-display);
   font-size: clamp(32px, 5vw, 48px);
   font-weight: 500;
   color: var(--v-white);
   letter-spacing: -0.02em;
   line-height: 1.15;
   margin: 0 0 16px;
}

.v-cfg-intro-subheadline {
   font-family: var(--v-font-body);
   font-size: 17px;
   font-weight: 400;
   color: rgba(255, 255, 255, 0.55);
   line-height: 1.6;
   max-width: 560px;
   margin: 0 auto;
}

/* ─── Output Preview Cards ─── */
.v-cfg-intro-previews {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   margin-bottom: 48px;
}

.v-cfg-intro-preview {
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 10px;
   padding: 28px 20px 24px;
   text-align: left;
   transition: border-color 0.25s ease, background 0.25s ease;
}

.v-cfg-intro-preview:hover {
   border-color: rgba(34, 178, 178, 0.3);
   background: rgba(34, 178, 178, 0.04);
}

.v-cfg-intro-preview-number {
   font-family: var(--v-font-display);
   font-size: 28px;
   font-weight: 400;
   color: var(--v-teal);
   opacity: 0.5;
   margin-bottom: 8px;
}

.v-cfg-intro-preview-tab {
   font-family: var(--v-font-body);
   font-size: 15px;
   font-weight: 600;
   color: var(--v-white);
   margin-bottom: 8px;
}

.v-cfg-intro-preview-desc {
   font-family: var(--v-font-body);
   font-size: 13px;
   font-weight: 400;
   color: rgba(255, 255, 255, 0.45);
   line-height: 1.55;
}

/* ─── How It Works Steps ─── */
.v-cfg-intro-steps {
   margin-bottom: 48px;
}

.v-cfg-intro-steps-title {
   font-family: var(--v-font-body);
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.3);
   margin-bottom: 16px;
}

.v-cfg-intro-steps-row {
   display: flex;
   justify-content: center;
   gap: 32px;
   flex-wrap: wrap;
}

.v-cfg-intro-step-item {
   font-family: var(--v-font-body);
   font-size: 14px;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.5);
}

.v-cfg-intro-step-item span {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: rgba(34, 178, 178, 0.12);
   color: var(--v-teal-light);
   font-size: 12px;
   font-weight: 700;
   margin-right: 6px;
}

/* ─── CTAs ─── */
.v-cfg-intro-ctas {
   display: flex;
   gap: 16px;
   justify-content: center;
   flex-wrap: wrap;
}

.v-cfg-intro-ctas .v-cfg-btn-primary {
   padding: 14px 36px;
   font-size: 15px;
}

.v-cfg-intro-ctas .v-cfg-btn-outline {
   padding: 14px 36px;
   font-size: 15px;
}

/* ─── Example Mode Banner ─── */
.v-cfg-example-banner {
   background: linear-gradient(135deg, rgba(34, 178, 178, 0.12) 0%, rgba(34, 178, 178, 0.06) 100%);
   border: 1px solid rgba(34, 178, 178, 0.2);
   border-radius: 10px;
   padding: 16px 24px;
   margin: 0 24px 8px;
}

.v-cfg-example-banner-inner {
   max-width: 820px;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   font-family: var(--v-font-body);
   font-size: 14px;
   color: rgba(255, 255, 255, 0.7);
   flex-wrap: wrap;
}

.v-cfg-example-banner-inner strong {
   color: var(--v-teal-light);
}

.v-cfg-example-start {
   padding: 8px 20px !important;
   font-size: 13px !important;
   white-space: nowrap;
}

/* ─── Responsive: Intro ─── */
@media (max-width: 640px) {
   .v-cfg-intro-previews {
      grid-template-columns: 1fr;
   }

   .v-cfg-intro-steps-row {
      gap: 16px;
   }

   .v-cfg-intro-ctas {
      flex-direction: column;
      align-items: stretch;
   }

   .v-cfg-example-banner-inner {
      flex-direction: column;
      text-align: center;
   }
}

/* ═══════════════════════════════════════════════════════════════
   PROPOSAL GRAPHICS — CSS-rendered visuals
   Toggle via GRAPHICS_ENABLED flag in configurator.js
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. Impact Diagram (Executive Brief) — 2×2 grid ─── */
.v-gfx-impact {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1px;
   margin: 24px 0;
   background: rgba(255, 255, 255, 0.06);
   border-radius: 12px;
   overflow: hidden;
}

.v-gfx-impact-card {
   padding: 24px 20px;
   background: var(--v-navy);
   cursor: default;
}

.v-gfx-impact-card:first-child { border-radius: 12px 0 0 0; }
.v-gfx-impact-card:nth-child(2) { border-radius: 0 12px 0 0; }
.v-gfx-impact-card:nth-child(3) { border-radius: 0 0 0 12px; }
.v-gfx-impact-card:last-child { border-radius: 0 0 12px 0; }

.v-gfx-impact-card-icon {
   color: var(--v-teal);
   margin-bottom: 10px;
   opacity: 0.7;
   line-height: 0;
}

.v-gfx-impact-card-icon svg {
   width: 22px;
   height: 22px;
}

.v-gfx-impact-card-label {
   font-family: var(--v-font-body);
   font-size: 15px;
   font-weight: 600;
   color: var(--v-white);
   margin-bottom: 4px;
}

.v-gfx-impact-card-desc {
   font-family: var(--v-font-body);
   font-size: 14px;
   color: rgba(255, 255, 255, 0.5);
   line-height: 1.5;
}

/* ─── 2. Phase Timeline (Strategic Proposal) ─── */
.v-gfx-timeline {
   display: flex;
   gap: 0;
   padding: 32px 0;
   margin-bottom: 24px;
   position: relative;
}

.v-gfx-timeline-phase {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   position: relative;
}

.v-gfx-timeline-node {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--v-teal), var(--v-teal-light));
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   z-index: 2;
   box-shadow: 0 0 20px rgba(34, 178, 178, 0.2);
}

.v-gfx-timeline-node span {
   font-family: var(--v-font-body);
   font-size: 18px;
   font-weight: 700;
   color: var(--v-navy);
}

.v-gfx-timeline-connector {
   position: absolute;
   top: 24px;
   left: calc(50% + 24px);
   right: calc(-50% + 24px);
   height: 2px;
   background: linear-gradient(to right, var(--v-teal), rgba(34, 178, 178, 0.2));
   z-index: 1;
}

.v-gfx-timeline-info {
   margin-top: 14px;
}

.v-gfx-timeline-title {
   font-family: var(--v-font-body);
   font-size: 14px;
   font-weight: 600;
   color: var(--v-white);
   margin-bottom: 4px;
}

.v-gfx-timeline-duration {
   font-family: var(--v-font-body);
   font-size: 12px;
   font-weight: 600;
   color: var(--v-teal-light);
   margin-bottom: 6px;
}

.v-gfx-timeline-desc {
   font-family: var(--v-font-body);
   font-size: 11px;
   color: rgba(255, 255, 255, 0.35);
   line-height: 1.4;
   max-width: 180px;
   margin: 0 auto;
}

/* ─── 3. Module Pipeline (Program Concept) — balanced grid ─── */
.v-gfx-pipeline {
   padding: 32px 24px;
   margin: 24px 0;
   background: rgba(255, 255, 255, 0.02);
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: 12px;
}

.v-gfx-pipeline-label {
   font-family: var(--v-font-body);
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.3);
   margin-bottom: 20px;
   text-align: center;
}

.v-gfx-pipeline-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 12px;
}

.v-gfx-pipeline-card {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px 16px;
   background: rgba(34, 178, 178, 0.05);
   border: 1px solid rgba(34, 178, 178, 0.12);
   border-radius: 10px;
}

.v-gfx-pipeline-num {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: var(--v-teal);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--v-font-body);
   font-size: 13px;
   font-weight: 700;
   color: var(--v-navy);
   flex-shrink: 0;
}

.v-gfx-pipeline-name {
   font-family: var(--v-font-body);
   font-size: 13px;
   font-weight: 500;
   color: var(--v-white);
   line-height: 1.3;
}

/* ─── Responsive: Graphics ─── */
@media (max-width: 640px) {
   .v-gfx-impact {
      grid-template-columns: 1fr;
   }

   .v-gfx-impact-card:first-child { border-radius: 12px 12px 0 0; }
   .v-gfx-impact-card:nth-child(2) { border-radius: 0; }
   .v-gfx-impact-card:nth-child(3) { border-radius: 0; }
   .v-gfx-impact-card:last-child { border-radius: 0 0 12px 12px; }

   .v-gfx-timeline {
      flex-direction: column;
      gap: 24px;
   }

   .v-gfx-timeline-connector {
      display: none;
   }

   .v-gfx-timeline-phase {
      flex-direction: row;
      text-align: left;
      gap: 16px;
   }

   .v-gfx-timeline-info {
      margin-top: 0;
   }

   .v-gfx-timeline-desc {
      max-width: none;
      margin: 0;
   }

   .v-gfx-pipeline-grid {
      grid-template-columns: 1fr;
   }
}

/* ─── Print: Graphics ─── */
@media print {
   .v-gfx-impact {
      background: #ddd;
   }

   .v-gfx-impact-card {
      background: #fff;
   }

   .v-gfx-impact-card-icon {
      color: #1A8F8F;
   }

   .v-gfx-impact-card-label {
      color: #333;
   }

   .v-gfx-impact-card-desc {
      color: #666;
   }

   .v-gfx-timeline-node {
      background: #1A8F8F;
      box-shadow: none;
   }

   .v-gfx-timeline-connector {
      background: #1A8F8F;
   }

   .v-gfx-timeline-title {
      color: #333;
   }

   .v-gfx-timeline-duration {
      color: #1A8F8F;
   }

   .v-gfx-timeline-desc {
      color: #666;
   }

   .v-gfx-pipeline {
      border-color: #ddd;
      background: #f9f9f9;
   }

   .v-gfx-pipeline-card {
      border-color: #1A8F8F;
      background: rgba(26, 143, 143, 0.05);
   }

   .v-gfx-pipeline-num {
      background: #1A8F8F;
   }

   .v-gfx-pipeline-name {
      color: #333;
   }
}