/* Code-native diagrams. All are labelled as illustrative; no product UI is fabricated. */
.module-visual{display:flex;align-items:center;justify-content:center;overflow:hidden;background:#edf1ec;border:1px solid #dce3dc;border-radius:4px;padding:22px;color:#34544b}

.mini-ledger{display:grid;grid-template-columns:1fr 22px 75px;gap:11px 18px;align-items:center;font-size:11px;width:100%;max-width:360px}
.mini-ledger>b{font:10px/1.5 ui-monospace,monospace;color:#526a5b}
.mini-ledger>i{display:block;height:5px;background:#a5b7ac;position:relative}
.mini-ledger>i:after{content:'';display:block;position:absolute;inset:0 30% 0 0;background:#648174}
.mini-ledger>span:nth-of-type(2){padding-bottom:13px;border-bottom:1px solid #c2cfc5}
.mini-ledger>span:nth-of-type(2)~b,.mini-ledger>span:nth-of-type(2)~i{margin-bottom:13px}
.mini-ledger>.ledger-result{grid-column:1/3;border-top:1px solid #c2cfc5;padding-top:12px;font-weight:600}
.mini-ledger>em{font-style:normal;font-size:17px;color:#456b58;border-top:1px solid #c2cfc5;padding-top:9px}

.mini-schedule{width:100%;max-width:350px;font-size:11px}
.mini-schedule>div{display:grid;grid-template-columns:70px 1fr;gap:16px;align-items:center;margin-bottom:13px}
.mini-schedule i{display:block;height:9px;background:linear-gradient(90deg,#668676 0 36%,transparent 36% 100%);border-bottom:1px solid #c3d0c4}
.mini-schedule>div:nth-child(2)>i{background:linear-gradient(90deg,transparent 30%,#809889 30% 69%,transparent 69%)}
.mini-schedule>div:nth-child(3)>i{background:linear-gradient(90deg,transparent 65%,#a9bba9 65%)}
.schedule-axis{display:block;padding-top:7px;border-top:1px solid #c3d0c4;font-size:10px;color:#506658}

.mini-fiscal{display:grid;grid-template-columns:.9fr 1.1fr;gap:14px 30px;align-items:center;width:100%;max-width:350px}
.fiscal-month{font-size:15px;line-height:1.35;max-width:90px}
.fiscal-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.fiscal-days>i{aspect-ratio:1;background:#d6dfd4;min-width:0}
.fiscal-days>.marked{background:#728c76}
.fiscal-caption{grid-column:1/-1;font-size:10px;border-top:1px solid #c3d0c4;padding-top:12px;color:#506658}

.mini-integration{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:350px}
.mini-integration>span{display:flex;flex-direction:column;gap:12px;align-items:center;font-size:10px;min-width:0;flex:1}
.mini-integration .icon{height:33px;width:33px;stroke-width:1.15}
.mini-integration>i{width:26px;border-top:1px solid #9db3a7;position:relative;margin-top:-24px}
.mini-integration>i:after{content:'';position:absolute;right:0;top:-3px;border:solid #9db3a7;border-width:0 1px 1px 0;width:5px;height:5px;transform:rotate(-45deg)}

.module-overview{min-width:0;background:#e0e8df;padding:28px;border:1px solid #bacbbc;border-radius:5px;align-self:center}
.module-overview-top{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:11px;color:#456252}
.module-overview-top>.icon{width:25px;height:25px}
.module-overview .module-visual{height:190px;margin:22px 0;background:#e9eee6;border-color:#c7d5c8;padding:28px}
.module-overview>p{font-size:15px;line-height:1.7;margin:0 0 18px;max-width:400px;color:#4b6654}
.module-overview>small{font-size:10px;color:#49624f;display:block;line-height:1.6}
.module-photo-band{padding-block:0 76px}
.module-photo-row{display:grid;grid-template-columns:1.2fr 1fr;gap:62px;align-items:center;border-top:1px solid var(--line);padding-top:40px}
.module-photo-row img{width:100%;height:auto;border-radius:4px}
.module-photo-row figcaption{font-size:10px;line-height:1.5;color:var(--muted);margin-top:8px}
.module-photo-copy h2{font-size:37px}
.module-photo-copy p{font-size:16px;color:var(--muted);margin:20px 0}
.module-photo-copy .eyebrow{font-size:11px}

@media(hover:hover) and (pointer:fine){.module-card:hover .module-visual{background:#e5ece4;border-color:#c2d3c1}
.module-card:hover .mini-integration>i{border-color:#466b56}
.module-card:hover .mini-integration>i:after{border-color:#466b56}
}

@media(max-width:1000px){.module-overview{padding:22px}
.module-overview .module-visual{padding:20px;height:170px}
.module-photo-row{gap:38px}
.module-photo-copy h2{font-size:30px}
.mini-ledger{grid-template-columns:1fr 18px 45px;gap:10px}
.mini-fiscal{gap:14px 18px}
.mini-integration{gap:7px}
}

@media(max-width:700px){.module-visual{padding:20px}
.mini-ledger{font-size:10px;gap:10px 12px}
.mini-schedule{font-size:10px}
.mini-schedule>div{grid-template-columns:62px 1fr;gap:14px}
.fiscal-month{font-size:14px}
.fiscal-days{gap:5px}
.mini-integration{gap:7px}
.mini-integration>span{font-size:9px}
.mini-integration>i{width:18px}
.mini-integration .icon{height:30px;width:30px}
.module-overview{margin-top:28px;padding:22px}
.module-overview .module-visual{height:150px;padding:20px;margin:18px 0}
.module-overview>p{font-size:14px}
.module-photo-band{padding-bottom:46px}
.module-photo-row{grid-template-columns:1fr;gap:27px;padding-top:28px}
.module-photo-copy h2{font-size:29px}
.module-photo-copy p{font-size:16px}
.module-photo-row figure{order:2}
}

@media(max-width:360px){.module-visual{padding:17px}
.mini-ledger{grid-template-columns:1fr 16px 30px;font-size:9px;gap:10px 8px}
.mini-fiscal{grid-template-columns:1fr 1.25fr;gap:14px}
.fiscal-caption,.schedule-axis{font-size:9px}
.mini-integration>span{font-size:8px}
}

