/* L04 owns this stylesheet. All rules are scoped to its page. */
.l04-page { --l04-ink:#292733; --l04-muted:#625e6f; --l04-purple:#5843bd; --l04-paper:#f3f0f8; }
.l04-page .l04-main { color:var(--l04-ink); font-size:17px; line-height:1.6; background:#fff; }
.l04-page .l04-main *, .l04-page .l04-main *::before, .l04-page .l04-main *::after { box-sizing:border-box; }
.l04-page .l04-wrap { max-width:1320px; margin:0 auto; padding:0 30px; }
.l04-page .l04-main img { display:block; max-width:100%; height:auto; }
.l04-page .l04-main figure { margin:0; }
.l04-page .l04-main h1, .l04-page .l04-main h2, .l04-page .l04-main h3, .l04-page .l04-main p { margin:0; }
.l04-page .l04-main h2 { font-size:clamp(30px,3.6vw,46px); line-height:1.13; font-weight:700; letter-spacing:-.04em; text-wrap:balance; }
.l04-page .l04-main h3 { font-size:23px; line-height:1.25; font-weight:650; letter-spacing:-.02em; }
.l04-page .l04-main p+p { margin-top:18px; }
.l04-page .l04-crumbs { display:flex; flex-wrap:wrap; gap:6px 12px; padding-top:16px; color:var(--l04-muted); font-size:12px; }
.l04-page .l04-crumbs a { color:inherit; }
.l04-page .l04-hero { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:48px; padding:54px 0 48px; }
.l04-page .l04-eyebrow { color:var(--l04-purple); font-size:12px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; margin-bottom:19px!important; }
.l04-page .l04-hero h1 { font-size:clamp(36px,3.9vw,55px); font-weight:700; line-height:1.08; letter-spacing:-.045em; }
.l04-page .l04-hero h1 em { display:block; color:var(--l04-purple); font-style:normal; }
.l04-page .l04-main .l04-lead { margin-top:24px; font-size:20px; line-height:1.55; color:var(--l04-muted); }
.l04-page .l04-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:27px; }
.l04-page .l04-button { display:inline-flex; gap:16px; justify-content:space-between; align-items:center; min-height:52px; padding:14px 22px; border-radius:10px; background:var(--l04-purple); color:#fff; text-decoration:none; font-size:15px; font-weight:650; line-height:1.35; transition:background .2s; }
.l04-page .l04-button:hover { background:#443298; }
.l04-page .l04-link { display:inline-flex; align-items:center; min-height:44px; color:var(--l04-purple); text-decoration:underline; text-underline-offset:5px; font-size:14px; font-weight:600; line-height:1.5; }
.l04-page .l04-hero-evidence { margin-top:25px!important; font-size:14px; line-height:1.6; color:var(--l04-muted); max-width:450px; }
.l04-page .l04-hero-evidence a { color:var(--l04-purple); text-decoration:underline; text-underline-offset:3px; }
.l04-page .l04-hero-art { padding:0 0 20px; border-radius:24px; overflow:hidden; background:#f0edf6; }
.l04-page .l04-hero-art img { width:100%; aspect-ratio:3/2; object-fit:cover; }
.l04-page .l04-hero-art figcaption { padding:17px 24px 0; font-size:15px; line-height:1.5; font-weight:600; }
.l04-page .l04-hero-art figcaption span { font-size:12px; font-weight:400; color:var(--l04-muted); }
.l04-page .l04-nav { display:flex; flex-wrap:wrap; gap:0 30px; padding:8px 0; border-block:1px solid #e5e0ee; }
.l04-page .l04-nav a { min-height:44px; display:flex; align-items:center; color:var(--l04-muted); font-size:14px; font-weight:600; text-decoration:none; }
.l04-page .l04-nav a:hover { color:var(--l04-purple); }
.l04-page .l04-section { padding:90px 0; scroll-margin-top:25px; }
.l04-page .l04-purchase { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:85px; }
.l04-page .l04-story > p:not(.l04-eyebrow) { margin-top:22px; color:var(--l04-muted); }
.l04-page .l04-callout { padding:20px 24px; margin-top:28px; border-left:3px solid #9984e2; background:var(--l04-paper); font-size:14px; }
.l04-page .l04-callout p { margin-top:8px; color:var(--l04-muted); }
.l04-page .l04-demo { padding:30px; background:linear-gradient(155deg,#eeebf6,#f8f6fa); border-radius:24px; }
.l04-page .l04-demo-label { text-align:center; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--l04-muted); margin-bottom:17px!important; }
.l04-page .l04-phone { width:100%; max-width:342px; margin:0 auto; padding:18px; border-radius:28px; border:5px solid #363140; background:#fff; box-shadow:0 26px 40px #41356916; }
.l04-page .l04-phone-head { display:flex; justify-content:space-between; font-size:12px; color:var(--l04-muted); padding:2px 0 12px; }
.l04-page .l04-tile { display:grid; grid-template-columns:1fr 1fr; gap:3px; margin-bottom:16px; height:88px; padding:12px 26px; border-radius:12px; background:#f3efec; }
.l04-page .l04-tile span { background:linear-gradient(128deg,#dad4cb,#c8c1b7); border:1px solid #b8b1a8; box-shadow:3px 3px 1px #ac9f9266; }
.l04-page .l04-phone h3 { font-size:18px; }
.l04-page .l04-product-unit { font-size:14px; line-height:1.5; color:var(--l04-muted); margin-top:7px!important; }
.l04-page .l04-demo-control { display:grid; gap:6px; margin-top:15px; }
.l04-page .l04-demo-control label { font-size:12px; font-weight:650; }
.l04-page .l04-demo-control input, .l04-page .l04-demo-control select { width:100%; min-width:0; min-height:44px; padding:9px 10px; font:inherit; font-size:16px; color:var(--l04-ink); background:#fff; border:1px solid #a9a1b7; border-radius:8px; }
.l04-page .l04-demo-control select { font-size:13px; }
.l04-page .l04-demo-control small { font-size:12px; color:var(--l04-muted); }
.l04-page .l04-result { display:grid; padding:14px; margin-top:16px; border-radius:12px; background:#f0ecfc; }
.l04-page .l04-result strong { font-size:24px; line-height:1.2; color:var(--l04-purple); font-weight:700; letter-spacing:-.03em; }
.l04-page .l04-result span { margin-top:5px; font-size:12px; }
.l04-page .l04-stock { margin-top:10px!important; font-size:14px; color:#286440; }
.l04-page .l04-stock[data-short="true"] { color:#854512; }
.l04-page .l04-receiving { min-height:54px; margin-top:12px!important; font-size:14px; line-height:1.6; color:var(--l04-muted); }
.l04-page .l04-button-small { width:100%; min-height:44px; margin-top:14px; font-size:15px; padding:10px 14px; justify-content:center; }
.l04-page .l04-error { margin-top:0!important; color:#a52a35; font-size:14px; }
.l04-page .l04-main [hidden] { display:none!important; }
.l04-page .l04-section-head { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:end; margin-bottom:38px; }
.l04-page .l04-section-head > p { color:var(--l04-muted); }
.l04-page .l04-data-list article { display:grid; grid-template-columns:50px .8fr 1.3fr; align-items:start; gap:25px; padding:28px 0; border-top:1px solid #e4dfec; }
.l04-page .l04-data-list article > span { font-size:12px; color:var(--l04-purple); padding-top:4px; }
.l04-page .l04-data-list p { color:var(--l04-muted); font-size:15px; }
.l04-page .l04-flow { margin-top:35px; padding:32px; background:var(--l04-paper); border-radius:20px; }
.l04-page .l04-flow ol { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:25px; padding:0; margin:0; list-style:none; }
.l04-page .l04-flow li { position:relative; display:grid; gap:10px; }
.l04-page .l04-flow li:not(:last-child)::after { content:'→'; position:absolute; right:-15px; top:0; color:var(--l04-purple); }
.l04-page .l04-flow strong { font-size:16px; font-weight:650; }
.l04-page .l04-flow span { font-size:13px; line-height:1.5; color:var(--l04-muted); }
.l04-page .l04-logistics { display:grid; grid-template-columns:1fr 1.1fr; gap:60px; margin:0 -10px; padding:50px; border-radius:24px; background:#312b46; color:#fff; }
.l04-page .l04-logistics .l04-eyebrow, .l04-page .l04-final .l04-eyebrow { color:#d6c7ff; }
.l04-page .l04-logistics .l04-lead { color:#ded8e9; font-size:18px; }
.l04-page .l04-logistics .l04-button { margin-top:30px; }
.l04-page .l04-button-light { background:#fff; color:#453297; }
.l04-page .l04-button-light:hover { background:#e9e2fc; }
.l04-page .l04-logistics-rows article+article { margin-top:27px; padding-top:27px; border-top:1px solid #6a617d; }
.l04-page .l04-logistics-rows h3 { font-size:21px; }
.l04-page .l04-logistics-rows p { margin-top:10px; color:#ded8e9; font-size:15px; }
.l04-page .l04-cases { display:grid; grid-template-columns:1fr 1fr; gap:42px; }
.l04-page .l04-cases figure { margin-bottom:27px; }
.l04-page .l04-cases img { width:100%; border-radius:16px; }
.l04-page .l04-cases figcaption { margin-top:10px; font-size:12px; color:var(--l04-muted); }
.l04-page .l04-cases h3 { margin-bottom:15px; }
.l04-page .l04-cases p:not(.l04-eyebrow) { font-size:15px; color:var(--l04-muted); }
.l04-page .l04-cases .l04-link { margin-top:15px; }
.l04-page .l04-integration { display:grid; grid-template-columns:1fr 1.4fr; gap:65px; margin-top:54px; padding-top:35px; border-top:1px solid #e4dfec; }
.l04-page .l04-integration p:not(.l04-eyebrow) { color:var(--l04-muted); font-size:15px; }
.l04-page .l04-integration .l04-link { margin-top:17px; }
.l04-page .l04-scope { margin-inline:-10px; padding:50px; border-radius:24px; background:#f5f3f9; }
.l04-page .l04-scope-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.l04-page .l04-scope-grid h3 { margin-bottom:18px; }
.l04-page .l04-scope-grid p, .l04-page .l04-scope-grid li { color:var(--l04-muted); font-size:15px; }
.l04-page .l04-scope-grid ul { margin:0; padding-left:20px; display:grid; gap:11px; }
.l04-page .l04-scope > .l04-link { margin-top:27px; }
.l04-page .l04-choice { padding-top:35px; margin-top:30px; border-top:1px solid #ded7e9; }
.l04-page .l04-choice-row { display:grid; grid-template-columns:.7fr 1.5fr; gap:35px; padding-top:20px; }
.l04-page .l04-choice-row strong { font-size:15px; font-weight:650; }
.l04-page .l04-choice-row p { font-size:14px; color:var(--l04-muted); }
.l04-page .l04-work { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:40px 65px; }
.l04-page .l04-work li { display:flex; gap:20px; padding-top:22px; border-top:1px solid #e4dfec; }
.l04-page .l04-work li > span { color:var(--l04-purple); font-size:12px; padding-top:5px; }
.l04-page .l04-work h3 { font-size:21px; }
.l04-page .l04-work p { color:var(--l04-muted); font-size:15px; margin-top:12px; }
.l04-page .l04-acceptance { margin-top:48px; padding:32px; border:1px solid #dcd4eb; border-radius:20px; }
.l04-page .l04-acceptance ul { display:grid; grid-template-columns:1fr 1fr; gap:18px 40px; list-style:none; margin:22px 0; padding:0; }
.l04-page .l04-acceptance li { position:relative; padding-left:24px; font-size:14px; }
.l04-page .l04-acceptance li::before { content:'✓'; position:absolute; left:0; color:var(--l04-purple); font-weight:750; }
.l04-page .l04-acceptance p { color:var(--l04-muted); font-size:14px; }
.l04-page .l04-faq { display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; border-top:1px solid #e4dfec; }
.l04-page .l04-faq .commercial-faq { width:100%; }
.l04-page .l04-related { display:grid; grid-template-columns:1fr 1fr; gap:30px; padding-bottom:50px; }
.l04-page .l04-related a { display:grid; gap:8px; padding:20px 0; border-top:1px solid #e4dfec; color:var(--l04-purple); text-decoration:none; }
.l04-page .l04-related span { color:var(--l04-muted); font-size:14px; }
.l04-page .l04-related strong { font-size:18px; font-weight:600; }
.l04-page .l04-final { display:grid; grid-template-columns:1.5fr 1fr; gap:70px; margin:0 -10px 60px; padding:50px; border-radius:24px; background:#473681; color:#fff; }
.l04-page .l04-final p:not(.l04-eyebrow) { margin-top:20px; font-size:17px; color:#e8e2f5; }
.l04-page .l04-final .l04-final-small { font-size:14px!important; }
.l04-page .l04-final .l04-actions { flex-direction:column; align-items:stretch; margin-top:0; justify-content:center; gap:8px; }
.l04-page .l04-final .l04-link { color:#fff; font-size:13px; }
.l04-page .l04-main a:focus-visible, .l04-page .l04-main input:focus-visible, .l04-page .l04-main select:focus-visible, .l04-page .l04-main summary:focus-visible { outline:3px solid #9075db; outline-offset:4px; }
@media(max-width:1050px) {
 .l04-page .l04-hero { gap:28px; }
 .l04-page .l04-hero h1 { font-size:42px; }
 .l04-page .l04-purchase { gap:40px; }
 .l04-page .l04-section-head { gap:35px; }
 .l04-page .l04-logistics, .l04-page .l04-scope, .l04-page .l04-final { padding:35px; }
 .l04-page .l04-final { gap:40px; }
}
@media(max-width:800px) {
 .l04-page .l04-hero { grid-template-columns:1fr; padding-top:38px; gap:30px; }
 .l04-page .l04-hero h1 { font-size:46px; max-width:680px; }
 .l04-page .l04-hero-art { max-width:600px; }
 .l04-page .l04-purchase, .l04-page .l04-logistics, .l04-page .l04-section-head, .l04-page .l04-scope-grid, .l04-page .l04-faq, .l04-page .l04-final { grid-template-columns:1fr; }
 .l04-page .l04-section { padding-block:65px; }
 .l04-page .l04-demo { max-width:450px; width:100%; margin:0 auto; }
 .l04-page .l04-data-list article { grid-template-columns:35px 1fr; gap:10px 18px; }
 .l04-page .l04-data-list article p { grid-column:2; }
 .l04-page .l04-flow ol { grid-template-columns:1fr 1fr; gap:28px; }
 .l04-page .l04-flow li::after { display:none; }
 .l04-page .l04-section-head { gap:23px; }
 .l04-page .l04-logistics, .l04-page .l04-scope { padding:35px; gap:35px; }
 .l04-page .l04-cases { gap:30px; }
 .l04-page .l04-integration { grid-template-columns:1fr; gap:22px; }
 .l04-page .l04-scope-grid { gap:30px; }
 .l04-page .l04-work { gap:30px; }
 .l04-page .l04-final { padding:35px; }
}
@media(max-width:600px) {
 .l04-page .l04-wrap { padding:0 20px; }
 .l04-page .l04-crumbs { font-size:12px; gap:4px 8px; }
 .l04-page .l04-hero { padding:30px 0; }
 .l04-page .l04-hero h1 { font-size:36px; overflow-wrap:normal; }
 .l04-page .l04-eyebrow { font-size:12px; margin-bottom:15px!important; }
 .l04-page .l04-main .l04-lead { font-size:17px; margin-top:20px; }
 .l04-page .l04-main { font-size:16px; }
 .l04-page .l04-main h2 { font-size:32px; }
 .l04-page .l04-main h3 { font-size:21px; }
 .l04-page .l04-actions { gap:8px; margin-top:22px; }
 .l04-page .l04-hero .l04-button { width:100%; }
 .l04-page .l04-hero-art { border-radius:16px; }
 .l04-page .l04-hero-art figcaption { padding:14px 18px 0; font-size:12px; }
 .l04-page .l04-nav { gap:0 22px; }
 .l04-page .l04-section { padding-block:50px; }
 .l04-page .l04-purchase { gap:30px; }
 .l04-page .l04-callout { padding:17px; font-size:14px; }
 .l04-page .l04-demo { padding:18px 12px; border-radius:16px; }
 .l04-page .l04-phone { padding:15px; border-width:4px; }
 .l04-page .l04-phone h3 { font-size:17px; }
 .l04-page .l04-data-list article { padding:23px 0; }
 .l04-page .l04-flow { padding:22px; }
 .l04-page .l04-flow ol { grid-template-columns:1fr; gap:20px; }
 .l04-page .l04-flow li { border-top:1px solid #d9d1e8; padding-top:13px; gap:5px; }
 .l04-page .l04-logistics, .l04-page .l04-scope, .l04-page .l04-final { margin-inline:0; padding:26px 20px; border-radius:18px; gap:30px; }
 .l04-page .l04-logistics .l04-button { font-size:15px; }
 .l04-page .l04-cases, .l04-page .l04-work, .l04-page .l04-acceptance ul, .l04-page .l04-related { grid-template-columns:1fr; }
 .l04-page .l04-cases { gap:45px; }
 .l04-page .l04-cases figure { margin-bottom:20px; }
 .l04-page .l04-cases img { border-radius:12px; }
 .l04-page .l04-choice-row { grid-template-columns:1fr; gap:7px; }
 .l04-page .l04-acceptance { padding:22px; }
 .l04-page .l04-acceptance ul { gap:15px; }
 .l04-page .l04-related { gap:0; padding-bottom:25px; }
 .l04-page .l04-final h2 { font-size:29px; }
 .l04-page .l04-final .l04-button { font-size:15px; }
}
@media(max-width:360px) {
 .l04-page .l04-wrap { padding:0 15px; }
 .l04-page .l04-hero h1 { font-size:30px; letter-spacing:-.045em; }
 .l04-page .l04-main h2 { font-size:29px; }
 .l04-page .l04-demo { padding-inline:8px; }
 .l04-page .l04-phone { padding:12px; }
 .l04-page .l04-data-list article { grid-template-columns:25px 1fr; gap:10px; }
 .l04-page .l04-logistics, .l04-page .l04-scope, .l04-page .l04-final { padding-inline:18px; }
}
@media(prefers-reduced-motion:reduce) {
 .l04-page .l04-main *, .l04-page .l04-main *::before, .l04-page .l04-main *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
/* Keep the shared dialog's close control visible on its white surface. */
.l04-page .modal__close { background-image:none; }
.l04-page .modal__close::before, .l04-page .modal__close::after { content:''; position:absolute; top:21px; left:11px; width:22px; height:2px; border-radius:1px; background:#51475f; transform:rotate(45deg); }
.l04-page .modal__close::after { transform:rotate(-45deg); }
.l04-page .modal__close:focus-visible { outline:3px solid #9075db; outline-offset:2px; }


/* 2026-10-03: shared 13FOX spacing and readable UI refinement. */
.l04-page .l04-wrap { box-sizing:border-box; width:100%; max-width:1320px; margin-inline:auto; padding-inline:15px; }
.commercial-page .l04-crumbs { gap:8px; font-size:16px; line-height:1.5; }
.commercial-page .l04-faq .commercial-faq > details { border:1px solid var(--commercial-border); border-radius:18px; background:#fff; padding:0; }
.commercial-page .l04-faq .commercial-faq > details > summary { font-size:17px; line-height:1.5; padding:20px 58px 20px 22px; }
.commercial-page .l04-faq .commercial-faq > details > :not(summary) { padding-left:22px; padding-right:22px; }
@media(max-width:600px) {
 .commercial-page .l04-crumbs { font-size:15px; }
 .commercial-page .l04-faq .commercial-faq > details > summary { font-size:16px; padding:18px 52px 18px 18px; }
 .commercial-page .l04-faq .commercial-faq > details > :not(summary) { padding-left:18px; padding-right:18px; }
}
.commercial-page .l04-callout { border-radius:14px; }
.commercial-page.l04-page main .l04-button { border-radius:14px; }