/* Editorial content shared by the homepage and tool guides. */
.home-content { padding: 86px 0; color: #22212b; text-align: left; }
.content-wrap { width: min(1180px, calc(100% - 80px)); margin: 0 auto; }
.home-content h2 { font: 600 clamp(32px, 3.5vw, 46px)/1.14 'Inter SemiBold', Arial, sans-serif; letter-spacing: -.045em; margin: 0; }
.home-content h3 { font: 600 21px/1.35 'Inter SemiBold', Arial, sans-serif; letter-spacing: -.025em; margin: 0; }
.home-content p { font: 400 14px/1.85 'Inter Regular', Arial, sans-serif; margin: 0; color: #78717f; }
.home-content .content-kicker { font-size: 10px; line-height: 1.5; letter-spacing: .16em; color: #91869e; margin-bottom: 18px; }
.content-heading { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: 65px; margin-bottom: 44px; }
.content-heading > p { max-width: 465px; }
.story-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.story-topics article { background: #efebf7; border-radius: 17px; padding: 34px 36px; display: flex; flex-direction: column; align-items: flex-start; }
.story-topics article:nth-child(2) { background: #ecf0e6; }
.story-topics article:nth-child(3) { background: #f3ece4; }
.story-topics article:nth-child(4) { background: #e8eef5; }
.topic-tag { display: block; font: 400 9px/1.5 'Inter Regular', Arial, sans-serif; letter-spacing: .12em; color: #8b8195; margin-bottom: 25px; }
.story-topics h3 { font-size: 29px; line-height: 1.18; letter-spacing: -.04em; }
.story-topics p { margin: 19px 0 25px; }
.story-topics a { display: inline-block; margin-top: auto; font: 600 12px/1.5 'Inter SemiBold', Arial, sans-serif; color: #6751df; text-decoration: none; padding: 7px 0; }
.story-topics a:hover { color: #443199; }
.home-workflow { background: #f0edf6; }
.home-process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; margin: 0; list-style: none; gap: 38px; }
.home-process > li { display: flex; flex-direction: column; min-width: 0; }
.process-index { color: #b0a2c5; font: 600 48px/1 'Inter SemiBold', Arial, sans-serif; letter-spacing: -.07em; margin-bottom: 27px; }
.home-process h3 { margin-bottom: 14px; }
.process-mini { height: 80px; margin-top: 27px; display: flex; gap: 9px; align-items: end; padding: 16px 0; border-top: 1px solid #dcd4e8; }
.mini-frames i { display: block; width: 48px; height: 40px; border: 1px solid #b6a5d0; border-radius: 5px; background: #e0d4ef; }
.mini-frames i:nth-child(2) { height: 48px; background: #cabae5; }
.mini-frames i:nth-child(3) { background: #f9f7fc; }
.mini-timeline { position: relative; align-items: center; }
.mini-timeline i { display: block; width: 29%; height: 25px; background: #c8b5e7; border-radius: 4px; }
.mini-timeline i:nth-child(2) { width: 13%; background: #a999d0; }
.mini-timeline i:nth-child(3) { width: 34%; background: #ded2ed; }
.mini-timeline i:nth-child(4) { width: 14%; background: #bfacd8; }
.mini-formats { align-items: center; }
.mini-formats i { display: grid; place-items: center; width: 26px; height: 46px; border: 1px solid #b6a5d0; border-radius: 4px; color: #9985b3; font: normal 8px/1 Arial, sans-serif; }
.mini-formats i:nth-child(2) { width: 38px; height: 38px; }
.mini-formats i:nth-child(3) { width: 64px; height: 36px; }
.home-edit-note { margin-top: 32px; background: #e3daf1; border-radius: 14px; padding: 27px 31px; display: grid; grid-template-columns: 55px 1fr; gap: 18px; align-items: center; }
.home-edit-note > span { color: #8265b5; font-size: 48px; line-height: 1; }
.home-edit-note h3 { font-size: 18px; margin-bottom: 9px; }
.home-edit-note p { font-size: 13px; }
.home-directory { background: #25212e; color: #faf8ff; }
.home-directory .content-kicker, .home-directory .tool-reading-grid article > span { color: #b7a0e4; }
.home-directory p { color: #bfb7cc; }
.tool-reading-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px 37px; }
.tool-reading-grid article { border-top: 1px solid #ffffff29; padding-top: 22px; }
.tool-reading-grid article > span { font: 400 9px/1.5 'Inter Regular', Arial, sans-serif; letter-spacing: .1em; display: block; margin-bottom: 19px; }
.tool-reading-grid h3 { font-size: 22px; }
.tool-reading-grid a { text-decoration: none; color: #f5f0ff; }
.tool-reading-grid a:hover { color: #cbb4ff; }
.tool-reading-grid p { font-size: 13px; line-height: 1.85; margin-top: 15px; }
.home-faq { padding-top: 82px; padding-bottom: 86px; }
.home-faq-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 75px; }
.home-faq .home-faq-intro { max-width: 340px; margin-top: 22px; }
.home-faq-list details { border-bottom: 1px solid #e3e0e9; }
.home-faq-list details:first-child { border-top: 1px solid #e3e0e9; }
.home-faq-list summary { cursor: pointer; list-style: none; position: relative; padding: 21px 32px 21px 0; font: 600 15px/1.55 'Inter SemiBold', Arial, sans-serif; }
.home-faq-list summary::-webkit-details-marker { display: none; }
.home-faq-list summary::after { content: '+'; color: #6950ed; font: 400 24px/1 Arial, sans-serif; position: absolute; top: 21px; right: 1px; }
.home-faq-list details[open] summary::after { content: '−'; }
.home-faq-list details p { padding: 0 22px 24px 0; }
.home-content :focus-visible { outline: 3px solid #6950ed; outline-offset: 5px; }
.guide-usecases { padding-top: 85px; }
.guide-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 65px; align-items: end; margin-bottom: 40px; }
.guide-heading > p { color: #78717f; font-size: 14px; line-height: 1.85; }
.guide-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px; }
.guide-cases article { border-top: 1px solid #e3e0e9; padding-top: 22px; }
.guide-case-index { color: #b19ccf; font: 600 30px/1 'Inter SemiBold', Arial, sans-serif; letter-spacing: -.04em; display: block; margin-bottom: 25px; }
.guide-cases h3 { font-size: 20px; }
.guide-cases p { color: #78717f; font-size: 14px; line-height: 1.85; margin-top: 16px; }
.quality-guide { display: grid; grid-template-columns: .85fr 1.15fr; gap: 68px; padding: 45px 46px; margin-bottom: 80px; border-radius: 20px; background: #eee8f6; }
.quality-guide .kicker { font-size: 9px; line-height: 1.65; }
.quality-intro { color: #81758c; font-size: 14px; line-height: 1.8; margin-top: 23px; }
.quality-flower { display: inline-block; color: #b8a1d5; font-size: 65px; line-height: 1; margin-top: 23px; }
.quality-guide ol { padding: 0; margin: 0; list-style: none; }
.quality-guide li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 23px 0; border-top: 1px solid #d8cee3; }
.quality-guide li:first-child { padding-top: 0; border-top: 0; }
.quality-guide li:last-child { padding-bottom: 0; }
.quality-guide li > span { color: #a68bbb; font-size: 11px; padding-top: 4px; }
.quality-guide h3 { font-size: 18px; }
.quality-guide li p { font-size: 13px; line-height: 1.85; color: #7b6e86; margin-top: 9px; }
.visual-guide { padding-top: 18px; padding-bottom: 80px; }
.visual-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.visual-card { background: #f0edf6; border-radius: 20px; overflow: hidden; }
.visual-card:nth-child(2) { background: #eef1e8; }
.visual-card figure { margin: 0; padding: 18px 18px 0; }
.visual-card img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; display: block; border-radius: 12px; }
.visual-card-copy { padding: 28px 32px 34px; }
.visual-card .visual-tag, .home-gallery .visual-tag { font-size: 9px; letter-spacing: .15em; color: #766887; margin: 0 0 15px; }
.visual-card h3 { font-size: 27px; letter-spacing: -.035em; line-height: 1.18; }
.visual-card-copy > p:not(.visual-tag) { font-size: 14px; line-height: 1.85; color: #706979; margin-top: 17px; }
.home-gallery { background: #eeeaf5; }
.home-visual-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.home-visual-grid article { background: #fafafa; border-radius: 18px; overflow: hidden; }
.home-visual-grid img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; }
.home-visual-copy { padding: 28px; }
.home-visual-copy h3 { font-size: 26px; line-height: 1.2; letter-spacing: -.04em; margin-bottom: 21px; }
.home-visual-copy > p:not(.visual-tag) { font-size: 13px; line-height: 1.85; margin: 0 0 16px; }
.home-visual-copy a { display: inline-block; font-size: 13px; color: #6850d9; text-decoration: none; margin-top: 8px; }
.home-visual-copy a:hover { color: #403086; }
.home-visual-copy a:focus-visible { outline: 2px solid #6850d9; outline-offset: 5px; }
@media (max-width: 1050px) {
  .home-visual-grid { gap: 16px; }
  .home-visual-copy { padding: 22px; }
  .content-wrap { width: calc(100% - 56px); }
  .content-heading, .guide-heading { gap: 38px; }
  .home-process { gap: 25px; }
  .story-topics article { padding: 28px; }
  .quality-guide { gap: 34px; padding: 35px; }
  .home-faq-layout { gap: 40px; }
}
@media (max-width: 760px) {
  .visual-guide { padding-bottom: 52px; }
  .visual-grid, .home-visual-grid { grid-template-columns: 1fr; gap: 24px; }
  .visual-card-copy { padding: 24px; }
  .visual-card h3, .home-visual-copy h3 { font-size: 25px; }
  .visual-card-copy > p:not(.visual-tag) { font-size: 13px; }
  .content-wrap { width: calc(100% - 48px); }
  .home-content { padding: 56px 0; }
  .content-heading, .guide-heading { grid-template-columns: 1fr; gap: 22px; margin-bottom: 31px; }
  .home-content h2 { font-size: 32px; }
  .home-content .content-kicker { font-size: 9px; }
  .home-content p { font-size: 14px; line-height: 1.8; }
  .story-topics { grid-template-columns: 1fr; gap: 14px; }
  .story-topics article { padding: 27px; }
  .story-topics h3 { font-size: 27px; }
  .topic-tag { font-size: 8px; margin-bottom: 21px; }
  .home-process { grid-template-columns: 1fr; gap: 30px; }
  .home-process > li { display: grid; grid-template-columns: 40px 1fr; gap: 0 13px; }
  .home-process h3 { font-size: 20px; margin: 0 0 13px; }
  .home-process p, .home-process .process-mini { grid-column: 2; }
  .process-index { font-size: 29px; margin: 1px 0 0; }
  .process-mini { margin-top: 20px; height: 70px; }
  .home-edit-note { grid-template-columns: 1fr; gap: 16px; padding: 25px; margin-top: 22px; }
  .home-edit-note > span { font-size: 36px; }
  .home-edit-note h3 { font-size: 19px; line-height: 1.4; }
  .home-edit-note p { font-size: 13px; }
  .tool-reading-grid { grid-template-columns: 1fr; gap: 28px; }
  .tool-reading-grid h3 { font-size: 22px; }
  .tool-reading-grid article > span { margin-bottom: 15px; }
  .home-faq-layout { grid-template-columns: 1fr; gap: 30px; }
  .home-faq-list summary { font-size: 14px; }
  .home-faq-list details p { font-size: 13px; }
  .guide-usecases { padding-top: 54px; }
  .guide-cases { grid-template-columns: 1fr; gap: 28px; }
  .guide-cases article { display: grid; grid-template-columns: 30px 1fr; gap: 0 14px; }
  .guide-case-index { font-size: 24px; margin: 3px 0 0; }
  .guide-cases p { grid-column: 2; margin-top: 13px; font-size: 13px; }
  .quality-guide { grid-template-columns: 1fr; padding: 29px 24px; gap: 26px; margin-bottom: 52px; border-radius: 16px; }
  .quality-guide h2 { font-size: 30px; }
  .quality-intro { font-size: 13px; margin-top: 19px; }
  .quality-flower { display: none; }
  .quality-guide li { grid-template-columns: 23px 1fr; gap: 10px; }
  .quality-guide h3 { font-size: 18px; }
}
