.insights-page { background: #fffdfc; }
.insights-hero { padding: 74px 0 68px; background: linear-gradient(135deg, #fff7f4 0%, #fff 62%); border-bottom: 1px solid #eadfda; }
.insights-hero .container, .insights-list-main .container { max-width: 1080px; }
.insights-breadcrumb { color: #6c7180; font-size: .86rem; margin-bottom: 30px; }
.insights-breadcrumb a { color: #203d7a; text-decoration: none; }
.insights-eyebrow { color: #ed1b2f; font-size: .78rem; font-weight: 800; letter-spacing: .14em; margin-bottom: 18px; }
.insights-hero h1 { max-width: 850px; margin: 0; color: #10131a; font-size: clamp(2.25rem, 5vw, 4.4rem); line-height: 1.12; letter-spacing: -.06em; }
.insights-hero-lead { max-width: 730px; margin: 25px 0 0; color: #545966; font-size: 1.22rem; line-height: 1.8; }
.insights-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; color: #656b77; font-size: .94rem; }
.insights-meta a { color: #173f94; font-weight: 800; text-decoration: none; }
.insights-list-main { padding: 70px 0 110px; }
.insights-section-head { display: flex; justify-content: space-between; gap: 32px; align-items: end; margin-bottom: 28px; }
.insights-section-head h2 { margin: 0; color: #10131a; font-size: 2rem; letter-spacing: -.04em; }
.insights-section-head p { max-width: 440px; margin: 0; color: #6a707d; line-height: 1.7; }
.insights-card { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 36px; padding: 34px; color: inherit; text-decoration: none; border: 1px solid #ded9d5; border-radius: 18px; background: #fff; box-shadow: 0 14px 35px rgba(29, 25, 23, .06); transition: transform .2s ease, box-shadow .2s ease; }
.insights-card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(29, 25, 23, .11); }
.insights-card .kicker { color: #ed1b2f; }
.insights-card h3 { margin: 12px 0 12px; color: #141820; font-size: clamp(1.55rem, 3vw, 2.25rem); line-height: 1.3; letter-spacing: -.04em; }
.insights-card p { margin: 0; color: #646a75; line-height: 1.75; }
.insights-card-aside { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 8px 0 4px; border-left: 1px solid #eee4df; padding-left: 28px; }
.insights-card-label { color: #1d448f; font-size: .82rem; font-weight: 800; letter-spacing: .08em; }
.insights-card-arrow { color: #ed1b2f; font-weight: 800; }
.insight-article-wrap { padding: 66px 0 110px; }
.insight-article-wrap .container { max-width: 1100px; }
.insight-article-layout { display: grid; grid-template-columns: minmax(0, 760px) 250px; gap: 64px; align-items: start; }
.insight-article { min-width: 0; }
.insight-article h1 { margin: 0; color: #10131a; font-size: clamp(2.25rem, 5vw, 4.1rem); line-height: 1.15; letter-spacing: -.065em; }
.insight-subtitle { margin: 22px 0 0; color: #616671; font-size: 1.25rem; line-height: 1.7; }
.insight-article .article-meta { display: flex; flex-wrap: wrap; gap: 12px 22px; margin: 24px 0 44px; padding-bottom: 26px; color: #6d727d; border-bottom: 1px solid #e8e2de; font-size: .94rem; }
.insight-article .article-meta a { color: #173f94; font-weight: 800; text-decoration: none; }
.insight-intro { margin: 0 0 48px; color: #292d35; font-size: 1.18rem; line-height: 1.9; }
.insight-article section { padding: 34px 0 37px; border-top: 1px solid #e8e2de; }
.insight-article h2 { margin: 0 0 16px; color: #10131a; font-size: 1.65rem; line-height: 1.4; letter-spacing: -.04em; }
.insight-article p { margin: 0 0 14px; color: #555b67; font-size: 1.04rem; line-height: 1.95; }
.insight-article ul { margin: 14px 0 0; padding-left: 1.25rem; color: #555b67; }
.insight-article li { margin: 8px 0; line-height: 1.7; }
.insight-pullquote { margin: 44px 0 0; padding: 28px 30px; color: #fff; background: #111827; border-radius: 14px; font-size: 1.28rem; font-weight: 700; line-height: 1.75; }
.insight-author-card { margin-top: 40px; padding: 28px; border: 1px solid #ded9d5; border-radius: 16px; background: #fff; }
.insight-author-card .kicker { color: #ed1b2f; }
.insight-author-card h2 { margin: 10px 0 10px; font-size: 1.45rem; }
.insight-author-card p { color: #626874; line-height: 1.8; }
.insight-author-card a { color: #173f94; font-weight: 800; text-decoration: none; }
.insight-side { position: sticky; top: 26px; padding: 22px; border: 1px solid #e3ddd9; border-radius: 14px; background: #fff; }
.insight-mobile-toc { display: none; }
.insight-side .kicker { color: #ed1b2f; }
.insight-side strong { display: block; margin: 10px 0 18px; font-size: 1.1rem; }
.insight-side a { display: block; padding: 11px 0; color: #4e5664; border-top: 1px solid #eee8e4; font-size: .91rem; line-height: 1.5; text-decoration: none; }
.insight-side a:hover, .insight-side a:focus { color: #ed1b2f; }
.insight-related { margin-top: 64px; padding-top: 34px; border-top: 1px solid #e8e2de; }
.insight-related h2 { margin: 0 0 18px; font-size: 1.7rem; }
.insight-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.insight-related-grid a { padding: 18px; color: #242a35; border: 1px solid #e3ddd9; border-radius: 12px; background: #fff; text-decoration: none; line-height: 1.55; }
.insight-related-grid a:hover { border-color: #ed1b2f; }
.insight-definition { margin: 34px 0 0; padding: 28px 30px; border: 2px solid #173f94; border-radius: 14px; background: #f7f9ff; }
.insight-definition .kicker, .insight-caution .kicker { color: #ed1b2f; }
.insight-definition strong { display: block; margin: 10px 0 12px; color: #102d67; font-size: 1.23rem; line-height: 1.65; }
.insight-definition p { margin: 0; color: #4d5668; }
.insight-comparison-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 24px; }
.insight-comparison-card { padding: 22px; border: 1px solid #e3ddd9; border-radius: 13px; background: #fff; }
.insight-comparison-card h3 { margin: 0 0 16px; color: #141820; font-size: 1.1rem; }
.insight-comparison-card p { margin: 0; color: #555b67; font-size: .98rem; line-height: 1.85; }
.insight-comparison-card.cag-way { border-color: #b9c9ee; background: #f7f9ff; }
.insight-process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.insight-process-step { min-height: 155px; padding: 20px; border: 1px solid #e3ddd9; border-radius: 13px; background: #fff; }
.insight-process-step span { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: 14px; border-radius: 50%; color: #fff; background: #173f94; font-size: .78rem; font-weight: 800; }
.insight-process-step h3 { margin: 0 0 8px; color: #141820; font-size: 1rem; }
.insight-process-step p { margin: 0; color: #626874; font-size: .92rem; line-height: 1.7; }
.insight-caution { margin-top: 24px; padding: 22px 24px; border: 1px solid #efd7ba; border-radius: 13px; background: #fffaf3; }
.insight-caution p { margin: 8px 0 0; }
.insight-inline-links { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.insight-inline-links a { padding: 7px 11px; color: #173f94; border: 1px solid #cbd7f0; border-radius: 999px; background: #f7f9ff; font-size: .9rem; font-weight: 700; text-decoration: none; }
.insights-card-featured { border-color: #b9c9ee; background: linear-gradient(135deg, #fff 0%, #f7f9ff 100%); box-shadow: 0 18px 42px rgba(23, 63, 148, .1); }
.insights-card-ai { border-color: #e8c8cc; background: linear-gradient(135deg, #fff 0%, #fff8f6 100%); }
.insights-card-review { border-color: #b9c9ee; background: linear-gradient(135deg, #fff 0%, #f7f9ff 100%); }
.insight-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 24px; }
.insight-stat-card { min-height: 132px; padding: 20px; border: 1px solid #dce3f1; border-radius: 13px; background: #f7f9ff; }
.insight-stat-card strong, .insight-stat-card span { display: block; }
.insight-stat-card strong { color: #173f94; font-size: 1.6rem; letter-spacing: -.04em; }
.insight-stat-card span { margin-top: 12px; color: #626874; font-size: .88rem; line-height: 1.55; }
.insight-workflow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 24px; }
.insight-workflow-card { min-height: 170px; padding: 20px; border: 1px solid #e3ddd9; border-radius: 13px; background: #fff; }
.insight-workflow-card span { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 50%; color: #fff; background: #173f94; font-size: .72rem; font-weight: 900; }
.insight-workflow-card h3 { margin: 0 0 8px; color: #141820; font-size: 1.03rem; line-height: 1.4; }
.insight-workflow-card p { margin: 0; color: #626874; font-size: .91rem; line-height: 1.7; }
.insight-guide-definition { margin: 0 0 46px; border-color: #ed1b2f; background: #fff8f6; }
.insight-guide-definition strong { color: #8c1f2a; }
.insight-step-section { padding-top: 16px !important; border-top: 0 !important; }
.insight-step-section .insights-section-head { align-items: start; margin-bottom: 24px; }
.insight-step-section .insights-section-head h2 { font-size: 1.8rem; }
.insight-step-section .insights-section-head p { font-size: .97rem; }
.insight-step-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 22px; border: 1px solid #d8e0f3; border-radius: 16px; background: #f7f9ff; }
.insight-step-flow article { min-height: 126px; padding: 16px; border: 1px solid #dce3f1; border-radius: 12px; background: #fff; }
.insight-step-flow article span { display: block; margin-bottom: 13px; color: #ed1b2f; font-size: .72rem; font-weight: 900; letter-spacing: .08em; }
.insight-step-flow article strong { display: block; color: #101b35; font-size: .96rem; line-height: 1.45; }
.insight-step-flow article small { display: block; margin-top: 8px; color: #6b7381; font-size: .8rem; line-height: 1.45; }
.insight-step-flow i { display: none; }
.insight-topic-grid, .insight-worktype-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.insight-topic-grid > div { padding: 20px; border-left: 3px solid #ed1b2f; background: #fff8f6; }
.insight-topic-grid strong, .insight-topic-grid span { display: block; }
.insight-topic-grid strong { color: #141820; font-size: 1rem; }
.insight-topic-grid span { margin-top: 8px; color: #626874; font-size: .91rem; line-height: 1.65; }
.insight-chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.insight-chip-list span { padding: 9px 12px; color: #173f94; border: 1px solid #cbd7f0; border-radius: 999px; background: #f7f9ff; font-size: .9rem; font-weight: 700; }
.insight-note { margin-top: 22px !important; padding: 16px 18px; border-radius: 10px; background: #f7f7f5; }
.insight-text-link { color: #173f94; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.insight-worktype-grid { grid-template-columns: repeat(4, 1fr); }
.insight-worktype-grid article { min-height: 132px; padding: 18px; border: 1px solid #e3ddd9; border-radius: 13px; background: #fff; }
.insight-worktype-grid span { color: #ed1b2f; font-size: .75rem; font-weight: 900; }
.insight-worktype-grid h3 { margin: 16px 0 8px; color: #141820; font-size: 1rem; line-height: 1.4; }
.insight-worktype-grid p { margin: 0; color: #626874; font-size: .88rem; line-height: 1.6; }
.insight-before-after { display: grid; grid-template-columns: 1fr 52px 1fr; gap: 14px; align-items: center; margin-top: 24px; }
.insight-before-after > div { min-height: 150px; padding: 22px; border: 1px solid #e3ddd9; border-radius: 13px; background: #fff; }
.insight-before-after > div:last-child { border-color: #b9c9ee; background: #f7f9ff; }
.insight-before-after span, .insight-before-after strong, .insight-before-after small { display: block; }
.insight-before-after span { color: #ed1b2f; font-size: .78rem; font-weight: 800; }
.insight-before-after strong { margin-top: 15px; color: #141820; font-size: 1.1rem; }
.insight-before-after small { margin-top: 10px; color: #626874; font-size: .88rem; line-height: 1.6; }
.insight-before-after > b { color: #173f94; text-align: center; font-size: 1.5rem; }
.insight-review-sequence { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px; }
.insight-review-sequence div { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 12px 14px; border: 1px solid #e3ddd9; border-radius: 10px; color: #454c59; font-size: .92rem; font-weight: 700; }
.insight-review-sequence span { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 25px; width: 25px; height: 25px; border-radius: 50%; color: #fff; background: #173f94; font-size: .72rem; }
.insight-checklist-section { padding: 34px 0 44px !important; border: 0 !important; }
.insight-checklist-section > .kicker { color: #ed1b2f; }
.insight-checklist-section h2 { font-size: 2rem; }
.insight-checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 24px; padding: 18px; border: 2px solid #173f94; border-radius: 16px; background: #f7f9ff; }
.insight-checklist > div { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; padding: 15px; border: 1px solid #dce3f1; border-radius: 11px; background: #fff; }
.insight-checklist span { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: #ed1b2f; font-size: .72rem; font-weight: 900; }
.insight-checklist strong { align-self: end; color: #141820; font-size: .95rem; line-height: 1.45; }
.insight-checklist small { align-self: start; margin-top: 5px; color: #6a707d; font-size: .8rem; line-height: 1.45; }
.insight-order-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; }
.insight-order-line span { padding: 10px 13px; color: #173f94; border: 1px solid #cbd7f0; border-radius: 999px; background: #f7f9ff; font-weight: 800; }
.insight-order-line i { color: #ed1b2f; font-style: normal; font-weight: 900; }
.insight-ai-usecase-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 24px; }
.insight-ai-usecase { min-height: 190px; padding: 20px; border: 1px solid #e3ddd9; border-radius: 13px; background: #fff; }
.insight-ai-usecase:nth-child(even) { border-color: #cbd7f0; background: #f7f9ff; }
.insight-ai-usecase span { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; background: #ed1b2f; font-size: .76rem; font-weight: 900; }
.insight-ai-usecase h3 { margin: 16px 0 8px; color: #141820; font-size: 1.02rem; line-height: 1.4; }
.insight-ai-usecase p { margin: 0; color: #626874; font-size: .9rem; line-height: 1.7; }
.insight-query-list { display: grid; gap: 9px; margin-top: 24px; }
.insight-query-list div { padding: 14px 16px; color: #343b48; border: 1px solid #e3ddd9; border-radius: 10px; background: #fff; font-size: .95rem; line-height: 1.6; }
.insight-query-list div::before { content: 'Q'; display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; margin-right: 9px; border-radius: 50%; color: #fff; background: #173f94; font-size: .7rem; font-weight: 900; }
.insight-ai-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; align-items: stretch; margin-top: 24px; }
.insight-ai-flow-wide { grid-template-columns: repeat(5, 1fr); }
.insight-ai-flow div { position: relative; min-height: 145px; padding: 18px 16px; border: 1px solid #dce3f1; border-radius: 12px; background: #f7f9ff; }
.insight-ai-flow div:not(:last-child)::after { content: '→'; position: absolute; top: 50%; right: -17px; z-index: 1; color: #ed1b2f; font-size: 1.3rem; font-weight: 900; }
.insight-ai-flow span, .insight-ai-flow strong, .insight-ai-flow small { display: block; }
.insight-ai-flow span { color: #ed1b2f; font-size: .72rem; font-weight: 900; letter-spacing: .08em; }
.insight-ai-flow strong { margin-top: 15px; color: #101b35; font-size: .98rem; line-height: 1.45; }
.insight-ai-flow small { margin-top: 8px; color: #6b7381; font-size: .8rem; line-height: 1.5; }
.insight-human-ai-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 24px; }
.insight-human-ai-card { padding: 24px; border: 1px solid #cbd7f0; border-radius: 14px; background: #f7f9ff; }
.insight-human-ai-card.human { border-color: #efd7ba; background: #fffaf3; }
.insight-human-ai-card h3 { margin: 0 0 16px; color: #102d67; font-size: 1.15rem; }
.insight-human-ai-card.human h3 { color: #8c4d20; }
.insight-human-ai-card ul { margin: 0; }
.insight-principle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 24px; }
.insight-principle-grid article { min-height: 145px; padding: 18px; border-top: 3px solid #173f94; border-radius: 10px; background: #f7f9ff; }
.insight-principle-grid article:nth-child(3n) { border-top-color: #ed1b2f; }
.insight-principle-grid span { color: #ed1b2f; font-size: .74rem; font-weight: 900; }
.insight-principle-grid h3 { margin: 13px 0 8px; color: #141820; font-size: .98rem; line-height: 1.45; }
.insight-principle-grid p { margin: 0; color: #626874; font-size: .86rem; line-height: 1.6; }
.insight-next-cta { margin: 24px 0 0; padding: 20px 22px; border: 1px solid #cbd7f0; border-radius: 13px; background: #f7f9ff; }
.insight-next-cta strong, .insight-next-cta a { color: #173f94; }
@media (max-width: 820px) { .insights-card, .insight-article-layout { grid-template-columns: 1fr; } .insights-card-aside { border-left: 0; border-top: 1px solid #eee4df; padding: 18px 0 0; } .insight-side { display: none; } .insight-mobile-toc { display: block; margin: 0 0 12px; padding: 0; border: 1px solid #e3ddd9; border-radius: 12px; background: #fff; } .insight-mobile-toc summary { padding: 17px 18px; color: #10131a; cursor: pointer; font-weight: 800; list-style: none; } .insight-mobile-toc summary::-webkit-details-marker { display: none; } .insight-mobile-toc summary::after { content: '＋'; float: right; color: #ed1b2f; } .insight-mobile-toc[open] summary::after { content: '−'; } .insight-mobile-toc nav { padding: 0 18px 12px; } .insight-mobile-toc a { display: block; padding: 10px 0; color: #4e5664; border-top: 1px solid #eee8e4; font-size: .92rem; text-decoration: none; } .insight-related-grid { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .insight-comparison-grid, .insight-topic-grid, .insight-worktype-grid, .insight-stat-grid, .insight-workflow-grid { grid-template-columns: 1fr 1fr; } .insight-process-grid { grid-template-columns: repeat(2, 1fr); } .insight-step-flow { grid-template-columns: repeat(2, 1fr); } .insight-step-flow i { display: none; } .insight-review-sequence { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .insight-ai-usecase-grid, .insight-principle-grid { grid-template-columns: repeat(2, 1fr); } .insight-ai-flow { grid-template-columns: repeat(2, 1fr); } .insight-ai-flow div:not(:last-child)::after { display: none; } }
@media (max-width: 560px) { .insights-hero { padding: 48px 0; } .insights-list-main, .insight-article-wrap { padding: 48px 0 76px; } .insight-article-wrap, .insight-article-wrap .container, .insight-article-layout { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow-x: hidden; } .insight-article-wrap .container { padding-left: 18px; padding-right: 18px; } .insights-section-head { display: block; } .insights-section-head p { margin-top: 12px; } .insights-card { padding: 24px; } .insight-article, .insight-article h1, .insight-subtitle, .insight-intro, .insight-article p, .insight-article li, .insight-pullquote { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; word-break: break-all; overflow-wrap: anywhere; white-space: normal; } .insight-article h1 { font-size: clamp(2rem, 9.5vw, 3rem); letter-spacing: -.055em; } .insight-article .article-meta { margin-bottom: 32px; } .insight-pullquote { padding: 22px; font-size: 1.1rem; } .insight-definition { padding: 22px; } .insight-process-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .insight-step-flow, .insight-topic-grid, .insight-worktype-grid, .insight-review-sequence, .insight-checklist, .insight-stat-grid, .insight-workflow-grid { grid-template-columns: 1fr; } .insight-step-flow { padding: 14px; } .insight-step-flow article { min-height: 0; } .insight-before-after { grid-template-columns: 1fr; gap: 8px; } .insight-before-after > b { transform: rotate(90deg); } .insight-checklist { padding: 12px; } .insight-checklist-section h2 { font-size: 1.6rem; } .insight-order-line { gap: 6px; } .insight-order-line span { padding: 8px 10px; font-size: .86rem; } .insight-order-line i { display: none; } }
@media (max-width: 560px) { .insight-ai-usecase-grid, .insight-ai-flow, .insight-human-ai-grid, .insight-principle-grid { grid-template-columns: 1fr; } .insight-ai-usecase { min-height: 0; } .insight-ai-flow div { min-height: 0; } }
