/* 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 .hero-logo { max-width: 260px; width: 60%; height: auto; display: block; margin: 0 auto 10px; }
.hero .hero-tagline { font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--p600); margin-bottom: 36px; }
.hero h1 { font-family: var(--font-display); font-size: clamp(28px, 4.5vw, 44px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 18px; max-width: 900px; margin-left: auto; margin-right: auto; }
.hero .sub { font-size: 18px; color: var(--n700); max-width: 680px; margin: 0 auto 20px; line-height: 1.55; }
.hero .proof { font-size: 14px; font-style: italic; color: var(--n800); max-width: 560px; margin: 0 auto 32px; padding: 12px 20px; background: var(--p100); border: 1px solid var(--p300); border-radius: var(--radius); }
/* WHY NOW */
.why-now { background: var(--n1000); color: var(--n0); padding: 60px 5vw; }
.why-now .container { max-width: 1100px; }
.why-now .section-label { color: var(--p300); }
.why-now h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 28px; color: var(--n0); }
.why-now-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.why-now-card { border: 1.5px solid var(--n700); border-radius: var(--radius); padding: 22px; background: rgba(255,255,255,0.03); }
.why-now-card .wn-tag { display: inline-block; font-family: var(--font-display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--p700); background: var(--p200); border: 1px solid var(--p300); padding: 4px 12px; border-radius: 100px; margin-bottom: 12px; }
.why-now-card h3 { font-size: 18px; font-weight: 800; color: var(--n0); margin-bottom: 8px; line-height: 1.3; }
.why-now-card p { font-size: 14px; color: var(--n500); line-height: 1.6; }
/* CORE BENEFITS TILES */
.core-benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.core-benefit-tile { border: var(--border); border-radius: var(--radius); padding: 24px; background: var(--n0); box-shadow: var(--shadow-sm); }
.core-benefit-tile h3 { font-size: 17px; font-weight: 800; margin-bottom: 8px; letter-spacing: -0.01em; }
.core-benefit-tile p { font-size: 14px; color: var(--n700); line-height: 1.55; }
/* EFFEKT BENEFITS */
.effekt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.effekt-card { padding: 28px 24px; border: 1px solid var(--n300); border-radius: var(--radius-lg); background: var(--n0); box-shadow: var(--shadow-soft); }
.effekt-card .effekt-icon { width: 40px; height: 40px; display: block; margin-bottom: 16px; }
.effekt-card h3 { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 8px; }
.effekt-card p { font-size: 14px; color: var(--n700); line-height: 1.6; }
/* SOCIAL PROOF */
.testimonial-block { max-width: 780px; margin: 0 auto 40px; padding: 28px 32px; border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); background: var(--n0); }
.testimonial-block blockquote { font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--n1000); margin-bottom: 14px; font-style: italic; }
.testimonial-block cite { font-size: 13px; color: var(--n700); font-style: normal; font-weight: 600; }
.supported-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--n700); text-align: center; margin-bottom: 14px; }
.supported-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.supported-logos .logo-slot { background: var(--n0); border: 1.5px dashed var(--n500); padding: 14px 22px; border-radius: var(--radius); font-size: 12px; font-weight: 600; color: var(--n700); min-width: 120px; text-align: center; }
/* CASE STUDIES — reuses .example-* */
/* SEE FOR YOURSELF (combined prototypes / walkthroughs) */
.syo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 24px; }
.syo-card { position: relative; border: var(--border); border-radius: var(--radius); padding: 18px 44px 18px 18px; background: var(--n0); box-shadow: 2px 4px 0 0 var(--p600); color: var(--n1000); display: block; transition: transform 0.15s, box-shadow 0.15s; }
.syo-card:hover { transform: translate(-1px, -2px); box-shadow: 4px 6px 0 var(--p600); }
.syo-card::after {
content: '';
position: absolute; top: 14px; right: 14px;
width: 20px; height: 20px;
background-color: var(--p600);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
transition: transform 0.15s;
}
.syo-card:hover::after { transform: translate(2px, -2px); }
.syo-card h3 { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.syo-card p { font-size: 12px; color: var(--n700); }
.syo-card .syo-link { font-size: 12px; font-weight: 700; color: var(--p600); margin-top: 10px; display: inline-block; }
/* GET STARTED (reuses phases but with a new intro tone) */
/* DIFFERENTIATORS */
.diff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.diff-card { border: var(--border); border-radius: var(--radius); padding: 20px; background: var(--n0); box-shadow: var(--shadow-sm); }
.diff-card .diff-icon { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--p600); margin-bottom: 8px; }
.diff-card h3 { font-size: 15px; font-weight: 800; margin-bottom: 6px; }
.diff-card p { font-size: 13px; color: var(--n700); line-height: 1.55; }
/* ABOUT / PRICING preview strips */
.mini-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.mini-strip h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; }
.mini-strip p { font-size: 15px; color: var(--n700); margin-bottom: 14px; }
.mini-strip .btn { font-size: 14px; padding: 10px 22px; }
/* FOOTER CTA with Sebastian */
/* Human-in-the-loop standalone section. */
.hitl-section { background: var(--p100); border-top: 1px solid var(--p200); border-bottom: 1px solid var(--p200); }
.hitl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; max-width: 1100px; margin: 0 auto; }
.hitl-lead .section-title { margin-bottom: 14px; }
.hitl-lead p { font-size: 17px; color: var(--n700); line-height: 1.6; max-width: 460px; }
.hitl-list { list-style: none; margin: 0; padding: 0; }
.hitl-list li {
position: relative; padding: 10px 0 10px 26px;
border-bottom: 1px solid var(--p200);
font-size: 15px; color: var(--n800); line-height: 1.55;
}
.hitl-list li:last-child { border-bottom: none; }
.hitl-list li::before {
content: ''; position: absolute; left: 0; top: 18px;
width: 10px; height: 10px; border-radius: 50%;
border: 2px solid var(--n1000); background: var(--p600);
}
.hitl-list li strong { color: var(--n1000); }
@media (max-width: 900px) {
.hitl-grid { grid-template-columns: 1fr; gap: 32px; }
}
/* CTA + FAQ layout: side-by-side on desktop, stacked (CTA on top) on mobile. */
.cta-faq { background: var(--n1000); padding: 96px 5vw; }
.cta-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; max-width: 1200px; margin: 0 auto; }
.cta-col { color: var(--n0); }
.cta-col.footer-cta { background: transparent; padding: 0; }
.cta-col h2 { font-family: var(--font-display); font-weight: 800; color: var(--n0); font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 14px; }
.cta-col .fc-intro { color: var(--n400); font-size: 16px; line-height: 1.6; margin-bottom: 24px; }
.fc-quote { font-size: 13px; color: var(--n500); margin-top: 6px; font-style: italic; }
.fc-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.faq-col { color: var(--n0); }
.faq-col .section-title { color: var(--n0); margin-bottom: 20px; }
.faq-col .faq-item { background: var(--n0); border: 1px solid var(--n700); }
@media (max-width: 900px) {
.cta-faq-grid { grid-template-columns: 1fr; gap: 40px; }
}
.footer-cta { background: var(--n1000); color: var(--n0); padding: 80px 5vw; }
.footer-cta .container { max-width: 1100px; }
.footer-cta-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; }
.footer-cta .section-label { color: var(--p300); }
.footer-cta h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.02em; color: var(--n0); margin-bottom: 14px; }
.footer-cta .fc-intro { color: var(--n500); font-size: 16px; line-height: 1.6; margin-bottom: 24px; }
.fc-sebastian { display: flex; gap: 20px; align-items: center; padding: 20px; border: 1px solid var(--n700); border-radius: var(--radius-lg); background: rgba(255,255,255,0.03); margin-bottom: 20px; }
.fc-photo { width: 140px; height: 140px; border-radius: 50%; background: var(--n700); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--n500); flex-shrink: 0; border: 2px solid var(--n500); text-align: center; overflow: hidden; }
.fc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-sebastian .fc-name { font-size: 17px; font-weight: 800; color: var(--n0); }
.fc-sebastian .fc-role { font-size: 13px; color: var(--n500); }
.fc-contact { list-style: none; font-size: 14px; color: var(--n500); }
.fc-contact li { padding: 6px 0; display: flex; gap: 10px; align-items: center; }
.fc-contact .fc-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--p300); width: 70px; flex-shrink: 0; }
.fc-contact a { color: var(--n0); font-weight: 600; }
.fc-contact a:hover { color: var(--p300); }
.fc-form { background: var(--n0); color: var(--n1000); padding: 28px; border-radius: var(--radius); border: var(--border); box-shadow: var(--shadow); }
.fc-form h3 { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.fc-form p { font-size: 13px; color: var(--n700); margin-bottom: 16px; }
.fc-form label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--n700); margin-bottom: 4px; margin-top: 10px; }
.fc-form input, .fc-form textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--n400); border-radius: 6px; font-family: inherit; font-size: 14px; color: var(--n1000); background: var(--n0); }
.fc-form input:focus, .fc-form textarea:focus { outline: none; border-color: var(--p500); }
.fc-form textarea { resize: vertical; min-height: 80px; }
.fc-form button { margin-top: 16px; width: 100%; }
.fc-form .fc-or { font-size: 11px; text-align: center; color: var(--n700); margin-top: 12px; }
@media (max-width: 900px) {
.footer-cta-grid, .mini-strip { grid-template-columns: 1fr; }
.why-now-grid { grid-template-columns: 1fr; }
}
/* Homepage iframe demo — soft card override (shell.css uses brutalist offset). */
#how .uc-demo .frame-wrap {
border: 1px solid var(--n300);
box-shadow: var(--shadow-soft-lg);
background: var(--n0);
}
#how .uc-demo .frame-toolbar {
border-bottom: 1px solid var(--n300);
}
#how .uc-demo .frame-toolbar .dot {
border-color: var(--n400);
}
/* 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 — tabs are a dark strip attached to the top of the panel,
so the whole thing reads as one surface (no floating cards). */
.example-tabs {
display: flex; flex-wrap: wrap; gap: 4px; align-items: stretch;
padding: 0; margin: 0;
}
.example-tab {
padding: 12px 20px;
font-family: var(--font-body); font-size: 14px; font-weight: 600;
border: var(--border); border-bottom: 2px solid transparent;
background: var(--n300); cursor: pointer; white-space: nowrap;
color: var(--n800); border-radius: var(--radius) var(--radius) 0 0;
transition: background 120ms, color 120ms;
margin-bottom: -2px; position: relative;
}
.example-tab:hover:not(.active) { background: var(--p100); color: var(--p700); }
.example-tab.active {
background: var(--n0); color: var(--n1000);
border-bottom-color: var(--n0);
font-weight: 700; z-index: 1;
}
.example-panels { display: grid; }
.example-panels > .example-panel { grid-area: 1 / 1; }
.example-panel { border: var(--border); border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow); background: var(--n0); overflow: hidden; position: relative; visibility: hidden; opacity: 0; transition: opacity 160ms ease; pointer-events: none; }
.example-panel.active { visibility: visible; opacity: 1; pointer-events: auto; }
.example-header { padding: 24px 28px; background: var(--p100); color: var(--n1000); border-bottom: 2px solid var(--n1000); }
.example-header h3 { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; margin-bottom: 6px; color: var(--n1000); }
.example-header p { font-size: 14px; color: var(--n800); }
.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: 1px solid var(--p300); padding: 12px 16px; border-radius: var(--radius); 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: 1px solid var(--n300); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-soft); background: var(--n0); }
.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 — dark strip attached to the panel, same pattern as .example-tabs. */
.enable-tabs {
display: flex; flex-wrap: wrap; gap: 4px; margin: 0; align-items: stretch;
padding: 0;
}
.enable-tab {
padding: 12px 20px;
font-family: var(--font-body); font-size: 14px; font-weight: 600;
border: var(--border); border-bottom: 2px solid transparent;
background: var(--n300); cursor: pointer; white-space: nowrap;
color: var(--n800); border-radius: var(--radius) var(--radius) 0 0;
transition: background 120ms, color 120ms;
margin-bottom: -2px; position: relative;
}
.enable-tab:hover:not(.active) { background: var(--p100); color: var(--p700); }
.enable-tab.active {
background: var(--n0); color: var(--n1000);
border-bottom-color: var(--n0);
font-weight: 700; z-index: 1;
}
.enable-panels { display: grid; }
.enable-panels > .enable-panel { grid-area: 1 / 1; }
.enable-panel { border: var(--border); border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg); background: var(--n0); overflow: hidden; box-shadow: var(--shadow); position: relative; text-align: left; visibility: hidden; opacity: 0; transition: opacity 160ms ease; pointer-events: none; }
.enable-panel.active { visibility: visible; opacity: 1; pointer-events: auto; }
.enable-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; text-align: left; }
.enable-left { padding: 28px 32px; border-right: 1px solid var(--n400); }
.enable-right { padding: 28px 32px; background: var(--p100); border-left: 1px solid var(--n400); }
.enable-left h4 { font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--n1000); margin-bottom: 10px; }
.enable-left p { font-size: 15px; color: var(--n800); margin-bottom: 14px; line-height: 1.55; }
.enable-flow-item { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; font-size: 15px; color: var(--n1000); line-height: 1.5; }
.enable-flow-item:last-child { margin-bottom: 0; }
.enable-flow-item strong { color: var(--n1000); }
.enable-flow-num { width: 26px; height: 26px; border-radius: 50%; background: var(--p600); color: var(--n0); font-family: var(--font-display); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0; border: 2px solid var(--n1000); }
.enable-right h4 { font-family: var(--font-display); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--p700); margin-bottom: 14px; }
.enable-outcome { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; font-size: 15px; color: var(--n1000); line-height: 1.5; }
.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: 12px; }
.int-logos span {
background: var(--p100);
border: 1px solid var(--p300);
padding: 10px 20px;
border-radius: 100px;
font-family: var(--font-body);
font-size: 16px;
font-weight: 600;
color: var(--p700);
line-height: 1.2;
}
.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; }
/* PROOF BAR */
.proof-bar { padding: 20px 5vw; border-top: 1px solid var(--n300); border-bottom: 1px solid var(--n300); background: var(--n200); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.proof-bar .proof-label { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n600); }
.proof-bar .int-logos { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.proof-bar .int-logos img { opacity: 0.75; }
.proof-bar p { font-size: 14px; color: var(--n700); }
.proof-bar .proof-stat { font-weight: 800; color: var(--p600); font-size: 18px; }
/* THE PROBLEM */
.problem-section { background: var(--n200); }
.problem-section .section-sub {
max-width: 720px; margin-bottom: 48px;
font-size: 17px; color: var(--n700); line-height: 1.55;
}
/* Comparison row — three peer functions + HR as the outlier. */
.systems-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 16px; margin: 0 0 48px;
}
.system-card {
display: flex; flex-direction: column; gap: 8px;
padding: 24px; background: var(--n0);
border: 1px solid var(--n300); border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
}
.system-card .system-role {
font-family: var(--font-display); font-weight: 700;
font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase;
color: var(--n600);
}
.system-card .system-tool {
font-family: var(--font-display); font-weight: 800;
font-size: 24px; letter-spacing: -0.01em; color: var(--n1000); line-height: 1.1;
}
.system-card--hr {
background: var(--n1000); color: var(--n0);
border-color: var(--n1000);
box-shadow: var(--shadow);
}
.system-card--hr .system-role { color: var(--red); }
.system-card--hr .system-tool { color: var(--n0); }
/* Result band — full-width ink-blue callout that closes the argument. */
.problem-result {
background: var(--p200);
border: 1px solid var(--p300);
border-radius: var(--radius-lg);
padding: 32px 40px;
box-shadow: none;
display: grid; grid-template-columns: 140px 1fr; gap: 32px;
align-items: start;
}
.problem-result::before { content: none; }
.problem-result .problem-result-label {
font-family: var(--font-display); font-weight: 800;
font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase;
color: var(--p700);
padding-top: 6px;
border-top: 3px solid var(--p700);
}
.problem-result p {
font-size: 18px; line-height: 1.55; color: var(--n1000);
margin: 0;
}
.problem-result p strong { color: var(--p700); }
@media (max-width: 900px) {
.systems-grid { grid-template-columns: 1fr 1fr; }
.problem-result { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
}
@media (max-width: 560px) {
.systems-grid { grid-template-columns: 1fr; }
}
/* WHAT CHANGES cards */
.changes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.change-card { border: 1px solid var(--n300); border-radius: var(--radius-lg); padding: 28px 24px; background: var(--n0); box-shadow: var(--shadow-soft); }
.change-card .change-icon {
width: 44px; height: 44px; border-radius: var(--radius);
background: var(--p200); color: var(--p600);
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 16px;
}
.change-card .change-icon svg { width: 24px; height: 24px; }
.change-card h3 { font-family: var(--font-display); font-size: 17px; font-weight: 800; margin-bottom: 8px; letter-spacing: -0.01em; }
.change-card p { font-size: 14px; color: var(--n700); line-height: 1.55; }
/* HOW IT WORKS — simple 3-step */
.how-steps { display: flex; flex-direction: column; gap: 24px; margin-top: 28px; }
.how-step-simple { display: flex; gap: 20px; align-items: flex-start; }
.how-step-num { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--p600); color: var(--n0); font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.how-step-simple h3 { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.how-step-simple p { font-size: 14px; color: var(--n700); line-height: 1.6; }
.how-subline { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--n300); }
.how-subline span { font-size: 13px; color: var(--n700); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.how-subline span::before { content: ''; width: 6px; height: 6px; background: var(--p500); border-radius: 50%; }
/* BUSINESS CASE */
.bcase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.bcase-card { border: var(--border); border-radius: var(--radius); padding: 24px; background: var(--n0); box-shadow: var(--shadow-sm); }
.bcase-card h3 { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.bcase-card p { font-size: 14px; color: var(--n700); line-height: 1.55; }
/* TRUST & COMPLIANCE */
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.trust-card { border: var(--border); border-top: 3px solid var(--p500); border-radius: var(--radius); padding: 24px; background: var(--n0); box-shadow: var(--shadow-sm); }
.trust-card h3 { font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.trust-card p { font-size: 13px; color: var(--n700); line-height: 1.6; }
/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 800px; }
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item { border: 1px solid var(--n300); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); background: var(--n0); color: var(--n1000); }
.faq-q { padding: 16px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 15px; background: var(--n0); }
.faq-q:hover { background: var(--n200); }
.faq-q::after { content: '+'; font-size: 18px; color: var(--p600); font-weight: 800; transition: transform 0.2s; }
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-item.open .faq-a { max-height: 300px; }
.faq-a-inner { padding: 0 20px 16px; font-size: 14px; color: var(--n700); line-height: 1.65; }
/* PRICING */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.pricing-card { border: var(--border); border-radius: var(--radius); padding: 28px; background: var(--n0); box-shadow: var(--shadow-sm); }
.pricing-card.featured { border-color: var(--p600); border-width: 2px; background: var(--p100); box-shadow: var(--shadow); }
.pricing-card h3 { font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.pricing-card .price { font-size: 28px; font-weight: 800; color: var(--p600); margin-bottom: 12px; }
.pricing-card .price span { font-size: 14px; font-weight: 500; color: var(--n700); }
.pricing-card p { font-size: 14px; color: var(--n700); line-height: 1.55; }
/* KPI TABLE (for subpages) */
.kpi-table { width: 100%; border-collapse: collapse; border: var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.kpi-table th { text-align: left; padding: 12px 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--p600); background: var(--p100); border-bottom: var(--border); }
.kpi-table td { padding: 12px 20px; font-size: 14px; border-bottom: 1px solid var(--n300); }
.kpi-table tr:last-child td { border-bottom: none; }
.kpi-table td:first-child { font-weight: 600; color: var(--n1000); }
.kpi-table td:nth-child(2) { color: var(--n700); }
.kpi-table td:nth-child(3) { color: var(--p600); font-weight: 700; }
/* PAIN POINTS (for subpages) */
.painpoints { display: flex; flex-direction: column; gap: 12px; max-width: 700px; }
.painpoint { border: 1px solid var(--n300); border-radius: var(--radius-lg); padding: 18px 22px; font-size: 15px; color: var(--n800); font-style: italic; background: var(--n0); box-shadow: var(--shadow-soft); }
/* CROSS LINKS (for subpages) */
.cross-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.cross-link { border: var(--border); padding: 8px 16px; border-radius: var(--radius); font-size: 13px; font-weight: 700; color: var(--p600); box-shadow: var(--shadow-sm); }
.cross-link:hover { background: var(--p100); }
/* Footer styles now live in shell.css so use-case pages render correctly. */
@media (max-width: 768px) {
/* .problem-grid legacy rule kept as no-op; comparison grid has its own breakpoint above. */
.footer-grid { grid-template-columns: 1fr 1fr; }
.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; }
}