.app-suite{scroll-margin-top:90px}.app-suite>h2{max-width:900px;line-height:1.2}.suite-intro{max-width:840px;color:var(--muted);margin:22px 0 30px;font-size:18px;line-height:1.75}.suite-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.suite-cards article{padding:26px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}.suite-cards .suite-duo-card{border-color:#92c6dc80;background:linear-gradient(135deg,#162c3b,#131b26)}.suite-cards .suite-role{color:var(--cyan);font-size:13px;margin-bottom:14px}.suite-cards h3{font-size:25px;margin-bottom:14px}.suite-cards article>p:last-child,.duo-heading>p:last-child,.duo-modes p{color:#c5d0df;line-height:1.75}.duo-showcase{margin-top:36px;padding:clamp(20px,4vw,40px);border:1px solid #92c6dc55;border-radius:22px;background:#111b27;scroll-margin-top:90px}.duo-heading h3{font-size:clamp(26px,3.5vw,40px);margin:12px 0 16px;line-height:1.3}.duo-heading>p:last-child{max-width:820px}.duo-showcase figure{margin:26px 0}.duo-showcase figure a{display:block}.duo-showcase img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}.duo-showcase figcaption{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.65}.duo-benefits{padding-left:22px;color:#e0e8f2;line-height:1.7}.duo-benefits li{margin:10px 0}.duo-benefits li::marker{color:var(--cyan)}.duo-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:26px 0 18px}.duo-modes section{padding:22px;border:1px solid var(--line);border-radius:12px;background:#0b1017}.duo-modes h4{font-size:20px;margin:0 0 12px}.duo-note{font-size:14px;line-height:1.7;color:var(--muted)}.suite-actions,.suite-footer{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:26px}.suite-actions .button,.suite-footer .button{white-space:normal;text-align:center;line-height:1.5}.suite-footer p{font-size:14px;color:var(--muted);flex:1;min-width:220px}.app-suite a:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}@media(max-width:800px){.suite-cards{grid-template-columns:1fr}.duo-modes{grid-template-columns:1fr}.suite-intro{font-size:16px}.suite-cards article{padding:22px}}@media(max-width:480px){.suite-actions{align-items:stretch;flex-direction:column}.suite-actions .button{width:100%}}

.duo-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:26px 0}.duo-gallery figure{margin:0;min-width:0}.duo-gallery .duo-gallery-main{grid-column:1 / -1}.duo-gallery figcaption strong{display:block;color:#e0e8f2;font-size:17px;margin-bottom:6px}.duo-more-layouts{margin:24px 0;color:#c5d0df}.duo-more-layouts summary{cursor:pointer;line-height:1.65}.duo-more-layouts summary:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}@media(max-width:650px){.duo-gallery{grid-template-columns:1fr;gap:24px}}


/* A calm introduction with emphasis on the main app and its features. */
.suite-feature{padding:clamp(24px,4vw,48px);border:1px solid #603337;border-radius:24px;background:#19181c}
.suite-feature>.section-kicker{color:#e8a3a5;font-weight:700;letter-spacing:.08em;margin-bottom:18px}
.suite-feature>h2{max-width:1020px;font-size:clamp(30px,3.8vw,48px);font-weight:750;line-height:1.2;letter-spacing:-.025em;margin:0;color:#dde4eb}
.suite-feature>h2 span{color:#e8a3a5}
.suite-feature>.suite-intro{max-width:850px;font-size:17px;color:#b8c4d0;margin:22px 0 32px}
.suite-feature .suite-cards article{background:#15161b;border-color:#383039;padding:24px}
.suite-feature .suite-cards .suite-main-card{background:#291e23;border-color:#a85258}
.suite-feature .suite-cards .suite-duo-card{background:#15161b;border-color:#383039}
.suite-feature .suite-role{font-size:12px;color:#aebfcd}
.suite-feature .suite-main-card .suite-role{display:inline-block;padding:5px 10px;border-radius:6px;background:#593035;color:#f3c3c5;font-weight:700}
.suite-feature .suite-cards h3{font-size:24px;color:#dee6ed}
.suite-feature .suite-main-card h3{font-size:29px}
.suite-feature .suite-cards article>p:not(.suite-role),.suite-feature-list{font-size:15px;color:#becbd6;line-height:1.75}
.suite-feature .suite-cards strong{color:#dce5ed;font-weight:650}
.suite-feature-list{padding-left:18px;margin:18px 0 0}
.suite-feature-list li+li{margin-top:12px}
.suite-feature-list li::marker{color:#d7797f}
.suite-app-examples{margin:18px 0 0;padding-top:16px;border-top:1px solid #383039}
html[lang="th"] .suite-feature>h2{letter-spacing:0;line-height:1.4}
@media(max-width:800px){.suite-feature{padding:26px;border-radius:20px}.suite-feature .suite-cards{gap:12px}.suite-feature>.suite-intro{font-size:16px}.suite-feature .suite-cards article{padding:22px}}
@media(max-width:480px){.suite-feature{padding:24px 20px}.suite-feature>h2{font-size:30px}.suite-feature>.section-kicker{font-size:11px;letter-spacing:.06em}.suite-feature>.suite-intro{margin:20px 0 24px}.suite-feature .suite-cards article{padding:20px}.suite-feature .suite-cards h3{font-size:23px}.suite-feature .suite-main-card h3{font-size:27px}html[lang="th"] .suite-feature>h2{font-size:28px}}