/* Homepage-specific styles. Loaded alongside shell.css on index.html only. */

.narrow { max-width: 800px; margin: 0 auto; }
.section-sub { color: var(--n700); font-size: 17px; max-width: 640px; margin-bottom: 40px; }
.centered { text-align: center; }
.centered .section-sub { margin-left: auto; margin-right: auto; }
.contrast { background: var(--n1000); color: var(--n0); }
.contrast .section-label { color: var(--p300); }
.contrast .section-sub { color: var(--n600); }
.cta-group { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* HERO */
.hero { padding: 80px 5vw 60px; text-align: center; }
.hero h1 { font-size: clamp(28px, 5vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; margin-bottom: 16px; max-width: 820px; margin-left: auto; margin-right: auto; }
.hero .sub { font-size: 18px; color: var(--n700); max-width: 640px; margin: 0 auto 32px; }

/* HOW — 3 panels */
.how-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0; align-items: start; }
.how-step { background: var(--n0); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.how-step-header { padding: 12px 16px; background: var(--n1000); color: var(--n0); font-weight: 800; font-size: 13px; }
.how-step-body { padding: 16px; font-size: 13px; }
.how-arrow { display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--n600); padding: 0 8px; margin-top: 40px; }

/* Chat mock */
.mock-chat { background: var(--n200); border-radius: 6px; padding: 12px; margin-bottom: 8px; }
.mock-msg { display: flex; gap: 8px; margin-bottom: 10px; font-size: 12px; }
.mock-msg:last-child { margin-bottom: 0; }
.mock-avatar { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--n1000); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 8px; flex-shrink: 0; }
.mock-avatar.ai { background: var(--p600); color: var(--n0); }
.mock-avatar.user { background: var(--n300); }
.mock-bubble { padding: 6px 10px; border-radius: 8px; line-height: 1.4; }
.mock-bubble.ai { background: var(--n0); border: 1px solid var(--n400); }
.mock-bubble.user { background: var(--p100); border: 1px solid var(--p300); }

/* Synthesis mock */
.mock-perspective { margin-bottom: 8px; padding: 6px 10px; border-radius: 6px; border-left: 3px solid; font-size: 12px; }
.mock-perspective.employee { border-color: var(--p400); background: var(--p100); }
.mock-perspective.manager { border-color: var(--amber); background: #FFF8E1; }
.mock-perspective .mp-label { font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.mock-finding { background: var(--n0); border: 1.5px solid var(--p500); border-radius: 6px; padding: 8px 10px; margin-top: 8px; font-size: 12px; }
.mock-finding .mf-label { font-weight: 700; color: var(--p700); font-size: 10px; margin-bottom: 2px; }

/* Action mock */
.mock-actions { background: var(--n200); border-radius: 6px; padding: 12px; font-size: 12px; }
.mock-action { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.mock-action:last-child { margin-bottom: 0; }
.mock-badge { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 3px; border: 1px solid var(--n1000); white-space: nowrap; flex-shrink: 0; margin-top: 1px; }

/* PHASES */
.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 24px; }
.phase { padding: 24px; border: var(--border); position: relative; }
.phase:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.phase:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.phase:not(:first-child) { border-left: none; }
.phase-num { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--p600); margin-bottom: 8px; }
.phase h3 { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.phase p { font-size: 13px; color: var(--n700); }
.phase .phase-time { font-size: 11px; font-weight: 700; color: var(--green-dark); margin-top: 8px; }
.phase.highlight { background: var(--p100); }
.phase .phase-note { font-size: 11px; color: var(--p700); font-weight: 600; margin-top: 8px; padding: 6px 8px; background: var(--p100); border-radius: 4px; }
.phase:first-child .phase-note { background: var(--n200); }

/* EXAMPLES */
.example-tabs { display: flex; gap: 0; overflow-x: auto; }
.example-tab { padding: 12px 20px; font-size: 13px; font-weight: 700; border: var(--border); border-bottom: none; background: var(--n200); cursor: pointer; white-space: nowrap; color: var(--n700); border-radius: var(--radius) var(--radius) 0 0; margin-right: -2px; position: relative; }
.example-tab.active { background: var(--n0); color: var(--n1000); z-index: 1; }
.example-tab:hover:not(.active) { background: var(--n300); }
.example-panel { display: none; border: var(--border); border-radius: 0 var(--radius) var(--radius) var(--radius); box-shadow: var(--shadow); background: var(--n0); overflow: hidden; }
.example-panel.active { display: block; }
.example-header { padding: 20px 28px; background: var(--n1000); color: var(--n0); }
.example-header h3 { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.example-header p { font-size: 13px; color: var(--n600); }
.chain-step { padding: 20px 28px; border-bottom: 1px solid var(--n300); display: grid; grid-template-columns: 130px 1fr; gap: 16px; }
.chain-step:last-child { border-bottom: none; }
.chain-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--p600); padding-top: 2px; }
.chain-content { font-size: 14px; line-height: 1.6; }
.chain-content em { color: var(--n700); font-style: normal; font-size: 12px; }
.chain-finding { background: var(--p100); border-left: 3px solid var(--p500); padding: 10px 14px; border-radius: 0 6px 6px 0; margin-top: 8px; }
.chain-finding strong { color: var(--p700); }
.chain-actions { display: flex; flex-direction: column; gap: 6px; }
.chain-action { display: flex; gap: 8px; align-items: flex-start; }
.ca-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; border: 1.5px solid var(--n1000); white-space: nowrap; flex-shrink: 0; margin-top: 2px; }
.ca-badge.hire { background: #E8F5E9; color: #1B5E20; }
.ca-badge.develop { background: var(--p100); color: var(--p800); }
.ca-badge.transfer { background: #FFF3E0; color: #E65100; }
.ca-badge.flag { background: #FFEBEE; color: #B71C1C; }
.ca-badge.match { background: #E3F2FD; color: #0D47A1; }
.ca-badge.grade { background: var(--p100); color: var(--p800); }
.try-link { padding: 12px 28px; background: var(--n200); border-top: 1px solid var(--n300); font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.try-link a { font-weight: 700; }

/* BENEFITS */
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.benefit-card { border: var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
.benefit-card .bf-number { font-size: 32px; font-weight: 800; color: var(--p600); margin-bottom: 4px; }
.benefit-card h3 { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.benefit-card p { font-size: 13px; color: var(--n700); }

/* FK ENABLEMENT */
.fk-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: fk; }
.fk-step { padding: 16px; border: 1px solid var(--n400); text-align: center; position: relative; }
.fk-step:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.fk-step:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.fk-step:not(:first-child) { border-left: none; }
.fk-step::before { counter-increment: fk; content: counter(fk); display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--p600); color: var(--n0); font-weight: 800; font-size: 11px; line-height: 24px; margin: 0 auto 8px; }
.fk-step h4 { font-size: 12px; font-weight: 800; margin-bottom: 4px; }
.fk-step p { font-size: 11px; color: var(--n700); }

/* Enablement tabs */
.enable-tabs { display: flex; gap: 0; margin-bottom: 0; overflow-x: auto; }
.enable-tab { padding: 10px 20px; font-size: 13px; font-weight: 700; border: var(--border); border-bottom: none; background: var(--n200); cursor: pointer; white-space: nowrap; color: var(--n700); border-radius: var(--radius) var(--radius) 0 0; margin-right: -2px; position: relative; }
.enable-tab.active { background: var(--n0); color: var(--n1000); z-index: 1; }
.enable-tab:hover:not(.active) { background: var(--n300); }
.enable-panel { display: none; border: var(--border); border-radius: 0 var(--radius) var(--radius) var(--radius); background: var(--n0); overflow: hidden; box-shadow: var(--shadow); }
.enable-panel.active { display: block; }
.enable-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.enable-left { padding: 24px; border-right: 1px solid var(--n400); }
.enable-right { padding: 24px; background: var(--n200); }
.enable-left h4 { font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.enable-left p { font-size: 13px; color: var(--n700); margin-bottom: 12px; }
.enable-flow-item { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; font-size: 13px; }
.enable-flow-item:last-child { margin-bottom: 0; }
.enable-flow-num { width: 22px; height: 22px; border-radius: 50%; background: var(--p600); color: var(--n0); font-weight: 800; font-size: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.enable-right h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--n700); margin-bottom: 12px; }
.enable-outcome { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; font-size: 13px; }
.enable-outcome:last-child { margin-bottom: 0; }
.enable-check { color: var(--green-dark); font-weight: 700; flex-shrink: 0; margin-top: 1px; }

/* USE CASES — expandable cards (homepage section, not to be confused with usecase_*.html pages) */
.uc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.uc-card { border: var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); cursor: pointer; transition: all 0.15s; }
.uc-card:hover { box-shadow: 3px 6px 0 var(--n1000); transform: translate(-1px, -2px); }
.uc-card.active { outline: 2px solid var(--p600); outline-offset: -2px; }
.uc-card h3 { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.uc-card .uc-hook { font-weight: 600; margin-bottom: 4px; font-size: 14px; }
.uc-card p { font-size: 13px; color: var(--n700); }
.uc-card .uc-time { font-size: 12px; color: var(--p600); font-weight: 700; margin-top: 8px; }
.uc-card .uc-expand { font-size: 11px; color: var(--p600); font-weight: 700; margin-top: 8px; }

/* UC Detail panel */
.uc-detail { display: none; border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--n0); overflow: hidden; margin-top: 24px; }
.uc-detail.visible { display: block; }
.uc-detail-header { padding: 20px 28px; background: var(--n1000); color: var(--n0); display: flex; justify-content: space-between; align-items: center; }
.uc-detail-header h3 { font-size: 18px; font-weight: 800; }
.uc-detail-close { background: none; border: none; color: var(--n0); font-size: 22px; cursor: pointer; padding: 4px; }
.uc-detail-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.uc-detail-col { padding: 24px; }
.uc-detail-col:first-child { border-right: 1px solid var(--n400); }
.uc-detail-section { margin-bottom: 20px; }
.uc-detail-section:last-child { margin-bottom: 0; }
.uc-detail-section h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--p600); margin-bottom: 8px; }
.uc-detail-section p { font-size: 13px; line-height: 1.6; color: var(--n800); }
.uc-detail-section ul { list-style: none; font-size: 13px; }
.uc-detail-section li { padding: 4px 0; display: flex; align-items: flex-start; gap: 8px; }
.uc-detail-section li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--p500); flex-shrink: 0; margin-top: 7px; }
.uc-detail-bcase { background: var(--p100); border-radius: 6px; padding: 14px 16px; font-size: 13px; }
.uc-detail-bcase strong { color: var(--p700); }
.uc-process { display: flex; gap: 0; margin-top: 4px; }
.uc-process-step { flex: 1; padding: 10px; text-align: center; border: 1px solid var(--n400); font-size: 11px; font-weight: 600; }
.uc-process-step:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.uc-process-step:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.uc-process-step:not(:first-child) { border-left: none; }
.uc-process-step .step-num { display: block; font-size: 9px; color: var(--p600); font-weight: 700; margin-bottom: 2px; }
.uc-proto-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--p600); }

/* LIVING SYSTEM */
.trigger-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.trigger-card { border: 1px solid var(--n400); border-radius: var(--radius); padding: 16px; font-size: 13px; }
.trigger-card .trig-event { font-weight: 700; margin-bottom: 4px; font-size: 12px; }
.trigger-card p { color: var(--n700); font-size: 12px; }

/* ROLES */
.roles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.role-card { border: var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
.role-card h3 { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.role-card p { font-size: 13px; color: var(--n700); margin-bottom: 8px; }
.role-example { font-size: 12px; background: var(--p100); padding: 10px 12px; border-radius: 6px; }

/* INT */
.int-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.int-logos span { background: var(--n0); border: var(--border); padding: 8px 16px; border-radius: var(--radius); font-size: 13px; font-weight: 600; box-shadow: var(--shadow-sm); }

.final-cta { text-align: center; padding: 80px 5vw; }
.final-cta h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 800; margin-bottom: 12px; }
.final-cta p { color: var(--n700); margin-bottom: 24px; max-width: 500px; margin-left: auto; margin-right: auto; }

/* Homepage footer override: heavier top border (shell.css uses the lighter usecase-page border) */
footer { padding: 20px 5vw; border-top: var(--border); }

@media (max-width: 768px) {
  .how-flow { grid-template-columns: 1fr; }
  .how-arrow { transform: rotate(90deg); padding: 8px 0; margin-top: 0; }
  .phases { grid-template-columns: 1fr; }
  .phase { border-left: var(--border) !important; border-radius: var(--radius) !important; margin-bottom: -2px; }
  .chain-step { grid-template-columns: 1fr; }
  .fk-flow { grid-template-columns: 1fr; }
  .fk-step { border-left: 1px solid var(--n400) !important; border-radius: var(--radius) !important; margin-bottom: -1px; }
  .enable-body { grid-template-columns: 1fr; }
  .enable-left { border-right: none; border-bottom: 1px solid var(--n400); }
  .uc-detail-body { grid-template-columns: 1fr; }
  .uc-detail-col:first-child { border-right: none; border-bottom: 1px solid var(--n400); }
  .uc-process { flex-wrap: wrap; }
}