:root {
  color-scheme: light;
  --ink: #17221e;
  --muted: #52625b;
  --green: #087d73;
  --deep: #075c54;
  --line: #d6e1da;
  --mint: #eef8f2;
  --rose: #a63352;
  --paper: #fff;
  --header: 76px;
}
* { box-sizing: border-box; letter-spacing: 0; }
html { scroll-behavior: auto; scroll-padding-top: calc(var(--header) + 20px); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.65; }
body.viewer-open { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
a { color: var(--deep); text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; }
a:hover { text-decoration: underline; }
button:focus-visible, a:focus-visible, select:focus-visible, summary:focus-visible, video:focus-visible { outline: 3px solid var(--rose); outline-offset: 4px; }
img { display: block; max-width: 100%; height: auto; }
svg { display: inline-block; flex-shrink: 0; vertical-align: middle; width: 20px; height: 20px; }
h1,h2,h3,h4,p,ol,ul,figure,dl,dd { margin: 0; }
h1,h2,h3,h4 { font-weight: 700; line-height: 1.24; overflow-wrap: anywhere; }
h1 { font-size: 48px; }
h2 { font-size: 38px; }
h3 { font-size: 27px; }
h4 { font-size: 20px; }
p { color: var(--muted); }
p+p { margin-top: 14px; }
strong { color: var(--ink); }
[hidden] { display: none !important; }
html:not([data-enhanced]) .example-panel[hidden] { display: grid !important; }
html:not([data-enhanced]) .guide-panel[hidden] { display: block !important; }
html:not([data-enhanced]) .selection-bar, html:not([data-enhanced]) .example-pagination { display: none; }
html:not([data-enhanced]) .example-panel+.example-panel, html:not([data-enhanced]) .guide-panel+.guide-panel { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.wrap { width: min(1120px, calc(100% - 80px)); margin-inline: auto; }
.section { padding-block: 64px; border-top: 1px solid var(--line); }
.section-heading { max-width: 850px; margin-bottom: 36px; }
.section-heading>p:last-child:not(.eyebrow) { max-width: 740px; margin-top: 20px; }
.eyebrow { color: var(--deep); font-size: 12px; font-weight: 700; margin-bottom: 14px; }
.soft { background: #f4f7f4; }
.text-link, .button, .back-link { display: inline-flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; font-weight: 700; min-height: 44px; line-height: 1.45; }
.text-link { font-size: 14px; padding-block: 8px; }
.button { border: 1px solid var(--green); border-radius: 5px; padding: 13px 18px; background: var(--green); color: white; font-size: 14px; text-align: center; }
.button:hover { background: var(--deep); border-color: var(--deep); text-decoration: none; }
.button.secondary { color: var(--deep); border-color: #8cae9d; background: #fff; }
.button.secondary:hover { background: var(--mint); }
.button.small { padding: 10px 13px; font-size: 12px; }
.icon-button { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.section-links { display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap; margin-top: 25px; }
.section-note, .small-print, .capacity { font-size: 13px; line-height: 1.65; max-width: 850px; margin-top: 24px; }
.skip { position: fixed; left: 14px; top: -100px; z-index: 100; padding: 12px; background: #fff; }
.skip:focus { top: 10px; }
.site-header { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: 25px; min-height: var(--header); }
.brand { display: inline-flex; flex-shrink: 0; align-items: center; }
.brand img { width: 157px; height: auto; }
.desktop-nav { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.desktop-nav a { font-size: 12px; color: var(--ink); font-weight: 600; white-space: nowrap; text-decoration: none; padding-block: 15px; }
.desktop-nav a:hover, .desktop-nav a[aria-current] { color: var(--green); text-decoration: underline; }
.menu-button { display: none; margin-left: auto; }
.mobile-registration { display: none; }
.mobile-nav { max-height: calc(100svh - var(--header)); overflow: auto; padding: 12px 24px 20px; background: #fff; border-top: 1px solid var(--line); }
.mobile-nav>a { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; min-height: 44px; text-decoration: none; border-bottom: 1px solid var(--line); }
.mobile-nav .mobile-contact { color: var(--green); font-weight: 700; }
.nojs-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; padding: 8px 16px; }
.nojs-nav a { font-size: 13px; }

/* Preserve the approved video-first opening and a visible path into the product. */
.video-first-hero { padding: 18px 0 20px; text-align: center; font-family: Arial, Helvetica, sans-serif; }
.video-first-hero h1 { font-size: 34px; line-height: 1.15; }
.video-first-hero .hero-summary { margin: 7px auto 14px; font-size: 15px; line-height: 1.5; }
.demo-player { position: relative; width: max-content; max-width: 100%; margin-inline: auto; }
.demo-player video { display: block; height: min(54svh,570px); max-width: 100%; width: auto; aspect-ratio: 9/16; object-fit: contain; background: #0d1913; }
.demo-play { position: absolute; inset: 40% 8% auto; display: grid; justify-items: center; gap: 10px; color: #fff; background: transparent; border: 0; padding: 12px 4px; }
.demo-play-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--green); border: 2px solid #fff; box-shadow: 0 2px 12px #0004; }
.demo-play-icon svg { width: 27px; height: 27px; margin-left: 3px; fill: currentColor; }
.demo-play-label { padding: 7px 10px; border-radius: 4px; background: #0d1913; font-size: 13px; font-weight: 700; line-height: 1.4; }
.demo-play:hover .demo-play-icon { background: var(--deep); }
.demo-context { margin-top: 9px; font-size: 11px; line-height: 1.45; }
.demo-next { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px; margin-top: 9px; }
.demo-next>.text-link { min-height: 36px; }
.demo-main-actions { display: flex; align-items: stretch; justify-content: center; gap: 8px; max-width: 100%; }
.demo-entry-note { margin-top: 7px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.pricing-demo-entry { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; border-block: 1px solid var(--line); }
.pricing-demo-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.guarantee-link { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; text-decoration: none; }
.demo-status { max-width: 520px; margin: 0 auto; font-size: 13px; line-height: 1.5; }
.demo-status:not(:empty) { margin-top: 10px; }
.demo-fallback { margin-top: 8px; font-size: 13px; }

.ecosystem-overview { background: #f0f7f2; }
.benefit-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); list-style: none; padding: 0; gap: 16px; }
.benefit-grid li { min-width: 0; display: flex; }
.benefit-link { display: grid; grid-template-columns: minmax(0,1fr) 20px; gap: 18px 12px; align-content: start; padding: 22px; width: 100%; height: 100%; color: var(--ink); background: #fff; border: 1px solid #d1e0d5; border-radius: 8px; text-decoration: none; }
.benefit-link:hover { border-color: var(--green); text-decoration: none; }
.benefit-link>div { grid-column: 1/-1; }
.benefit-icon { color: var(--green); display: inline-flex; align-items: center; width: 32px; height: 32px; }
.benefit-icon svg { width: 27px; height: 27px; }
.benefit-arrow { grid-column: 2; grid-row: 1; padding-top: 5px; color: var(--muted); }
.benefit-grid h3 { font-size: 19px; }
.benefit-grid p { font-size: 14px; margin-top: 12px; }
.overview-foot { border-top: 1px solid #c0d3c6; margin-top: 28px; padding-top: 20px; font-size: 14px; }
.overview-foot .text-link { margin-left: 12px; }
.manager-route, .simple-process { display: flex; list-style: none; padding: 0; flex-wrap: wrap; gap: 14px 26px; margin-block: 28px 36px; }
.manager-route li, .simple-process li { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; min-width: 0; }
.manager-route svg, .simple-process svg { color: var(--green); width: 18px; height: 18px; }
.screen-pair, .operations-examples { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px; align-items: start; }
.screen-pair>article, .operations-examples>article { min-width: 0; }
.screen-pair h3 { font-size: 25px; }
.screen-pair article>p:not(.eyebrow) { margin-top: 16px; max-width: 460px; }
.screen-pair .product-shot { margin-top: 24px; width: 100%; }
.product-shot { min-width: 0; display: flex; flex-direction: column; }
.image-button { display: flex; flex-direction: column; width: 100%; background: transparent; border: 0; padding: 4px; color: var(--deep); text-decoration: none; }
.image-button img { width: 100%; height: auto; object-fit: contain; }
.image-button:hover { text-decoration: none; }
.image-button:hover .enlarge { text-decoration: underline; }
.enlarge { display: flex; align-items: center; justify-content: center; gap: 6px; padding-top: 10px; font-size: 12px; line-height: 1.4; min-height: 36px; margin-top: auto; }
.enlarge svg { width: 14px; height: 14px; }
.product-shot figcaption { text-align: center; font-size: 12px; color: var(--muted); margin-top: 3px; }
.mobile-capture { max-width: 358px; margin-inline: auto; }
.screen-pair .mobile-capture { max-width: 350px; }
.check-list { list-style: none; padding: 0; margin-top: 22px; }
.check-list li { display: flex; gap: 10px; margin-block: 12px; align-items: flex-start; font-size: 14px; }
.check-list svg { color: var(--green); margin-top: 3px; width: 17px; height: 17px; }
.split-heading, .foundation-strip, .faq-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items: start; }
.split-heading>p, .split-heading>div>p:not(.eyebrow) { padding-top: 6px; }
.evaluation-story { padding-block: 36px; }
.evaluation-examples { display: grid; grid-template-columns: repeat(2,minmax(0,308px)); gap: 48px; justify-content: center; margin-top: 36px; }
.evaluation-examples h4 { text-align: center; font-size: 17px; margin-bottom: 22px; }
.foundation-strip { border-top: 1px solid var(--line); padding-top: 35px; margin-top: 20px; }
.foundation-strip .text-link { margin-right: 18px; margin-top: 12px; }
.simulation-gallery { padding-block: 42px; margin-top: 42px; border-block: 1px solid var(--line); }
.simulation-gallery .section-heading h3 { font-size: 30px; }
.simulation-gallery-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 36px; align-items: start; }
.simulation-gallery-grid article { display: flex; flex-direction: column; min-width: 0; }
.simulation-gallery-grid h4 { font-size: 21px; }
.simulation-gallery-grid article>p:not(.eyebrow) { font-size: 14px; margin-top: 12px; }
.simulation-gallery-grid .product-shot { margin-top: 24px; }
.device-line { display: flex; align-items: flex-start; gap: 16px; border-block: 1px solid var(--line); padding-block: 22px; margin-bottom: 36px; max-width: 850px; }
.device-line svg { color: var(--green); width: 30px; height: 30px; margin-top: 2px; }
.device-line p { font-size: 15px; }
.operations-examples { grid-template-columns: minmax(0,1.4fr) minmax(0,.6fr); gap: 40px; }
.operations-examples h3 { font-size: 20px; margin-bottom: 22px; }
.promotion-story { background: #fff; }
.promotion-story .eyebrow { color: var(--rose); }
.purchase-story { background: #f5f7f6; }
.network-screens { margin-top: 35px; }
.feature-story { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 70px; align-items: center; padding-block: 24px; }
.feature-copy,.feature-media { min-width: 0; }
.feature-copy>p:not(.eyebrow) { margin-top: 18px; }
.feature-copy .text-link { margin-top: 16px; }
.feature-media { display: flex; justify-content: center; }
.feature-media .product-shot { width: 100%; max-width: 356px; }
.feature-story-reverse .feature-copy { grid-column: 2; grid-row: 1; }
.feature-story-reverse .feature-media { grid-column: 1; grid-row: 1; }
.customer-journey { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); background: #f5f7f6; padding: 22px; margin-block: 24px; gap: 24px; }
.customer-journey li { align-items: flex-start; }
.customer-journey svg { margin-top: 2px; }
.key-note { display: flex; align-items: flex-start; gap: 12px; padding-block: 20px; margin-top: 28px; border-block: 1px solid var(--line); max-width: 850px; }
.key-note svg { color: var(--green); margin-top: 3px; }
.key-note p { font-size: 14px; }
.purchase-process { margin-top: 32px; margin-bottom: 20px; }
.supporting-list { padding: 0; list-style: none; }
.supporting-list li { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 20px; border-top: 1px solid var(--line); padding-block: 22px; align-items: start; }
.supporting-list li>span { color: var(--green); }
.supporting-list h3 { font-size: 19px; }
.supporting-list p { font-size: 14px; margin-top: 7px; }
details { border-top: 1px solid var(--line); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; font-weight: 600; cursor: pointer; line-height: 1.55; list-style: none; }
summary::-webkit-details-marker { display: none; }
details[open]>summary>svg { transform: rotate(45deg); }
details>p { margin-block: 0 22px; }
.included-features { margin-top: 25px; }
.other-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; padding-top: 12px; }
.other-grid h3 { font-size: 19px; }
.other-grid .check-list li { font-size: 13px; }
.pricing { background: #f4f7f4; }
.package-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px; margin-top: 32px; }
.package-option { border: 1px solid var(--line); border-radius: 8px; padding: 28px; background: #fff; display: flex; flex-direction: column; min-width: 0; }
.package-option[data-package="manager"] { border-color: var(--green); }
.package-heading { min-height: 138px; }
.package-option h3 { font-size: 26px; }
.package-summary { font-size: 14px; margin-top: 10px; }
.package-price { padding: 0; margin-block: 22px; font-size: 34px; color: var(--ink); font-weight: 700; line-height: 1.3; }
.package-price span { display: block; font-size: 13px; font-weight: 400; margin-top: 5px; }
.card-guarantee { display: flex; gap: 11px; color: var(--deep); }
.card-guarantee svg { margin-top: 3px; }
.card-guarantee strong { color: var(--deep); font-size: 14px; }
.card-guarantee p { font-size: 13px; margin-top: 5px; }
.package-audience { font-size: 14px; margin-top: 24px; }
.package-question { font-size: 15px; font-weight: 700; color: var(--deep); }
.package-option .check-list { flex: 1; margin-bottom: 24px; }
.package-option>.button { width: 100%; }
.package-help { align-self: center; margin-top: 8px; font-size: 13px; }
.package-comparison, .service-detail { margin-top: 25px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
caption { text-align: left; color: var(--muted); font-size: 13px; padding-block: 10px; }
th,td { padding: 14px 12px; border-top: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; }
.guarantee-band { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: 48px; border-top: 1px solid var(--line); padding-top: 35px; margin-top: 35px; }
.guarantee-band svg { width: 30px; height: 30px; color: var(--green); margin-bottom: 12px; }
.guarantee-band h3 { font-size: 25px; }
.service-detail p { font-size: 14px; max-width: 850px; }
.start-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); list-style: none; padding: 0; gap: 36px; margin-block: 34px; }
.start-steps li { padding-top: 8px; }
.start-steps span { display: inline-grid; place-items: center; color: var(--deep); font-size: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--mint); }
.start-steps h3 { font-size: 21px; margin-top: 12px; }
.start-steps p { font-size: 14px; margin-top: 10px; }
.faq { background: #f4f7f4; }
.faq-grid { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); }
.faq-grid details>p { font-size: 14px; }
.site-footer { padding-block: 45px 30px; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
.footer-grid p { font-size: 14px; max-width: 280px; margin-top: 16px; }
.footer-grid nav, .footer-grid>div:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; font-size: 13px; }
.footer-grid nav a { text-decoration: none; }
.footer-note { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 35px; font-size: 12px; }

/* Feature detail pages and progressive guides share the same visual language. */
.page-intro { padding-block: 40px 55px; }
.back-link { justify-content: flex-start; font-size: 13px; margin-bottom: 28px; }
.page-intro h1 { max-width: 930px; }
.page-intro>p:not(.eyebrow) { max-width: 730px; font-size: 18px; margin-top: 22px; }
.page-jumps { display: flex; flex-wrap: wrap; gap: 12px 28px; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 30px; }
.page-jumps a { display: inline-flex; align-items: center; min-height: 44px; gap: 10px; font-size: 14px; text-decoration: none; }
.story-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 72px; align-items: start; }
.story-copy>p:not(.eyebrow) { margin-top: 20px; }
.story-copy .product-shot { margin-top: 30px; }
.story-copy .section-note { font-size: 13px; }
.story-takeaway { color: var(--deep); font-weight: 600; }
.detail-steps { list-style: none; padding: 0; margin-top: 32px; }
.detail-steps li { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 20px; padding-block: 24px; border-top: 1px solid var(--line); }
.detail-steps li>span { color: var(--green); font-size: 14px; }
.detail-steps h3 { font-size: 21px; }
.detail-steps p { margin-top: 10px; max-width: 740px; }
.content-detail { margin-top: 32px; }
.content-detail .product-shot { margin-bottom: 24px; }
.evidence-list { margin-top: 30px; }
.evidence-list>div { display: grid; grid-template-columns: minmax(0,.6fr) minmax(0,1.4fr); gap: 40px; border-top: 1px solid var(--line); padding-block: 23px; }
.evidence-list dt { font-size: 20px; font-weight: 700; }
.evidence-list dd { color: var(--muted); }
.promo-package-lines { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px; margin-block: 32px; }
.promo-package-lines>div { border-top: 2px solid var(--green); padding-top: 20px; }
.promo-package-lines h3 { font-size: 23px; }
.promo-package-lines p { margin-top: 14px; }
.next-action h2 { margin-bottom: 20px; }
.next-action p { max-width: 760px; margin-bottom: 24px; }
.next-action .button { margin-right: 22px; margin-bottom: 12px; }
.next-action>.wrap>.text-link { margin-right: 24px; }
.selection-bar { position: sticky; top: var(--header); z-index: 20; padding-block: 15px; border-block: 1px solid var(--line); background: #f4f7f4; }
.selection-bar .wrap { display: flex; align-items: center; gap: 20px; }
.selection-bar label { font-size: 13px; font-weight: 700; }
.selection-bar select { width: min(410px,100%); border: 1px solid #8cae9d; border-radius: 4px; padding: 11px; font-size: 16px; background: #fff; min-height: 46px; }
.example-count { font-size: 12px; white-space: nowrap; }
.examples-main, .guide-main { padding-block: 45px 60px; scroll-margin-top: 175px; }
.example-panel { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 36px 60px; }
.example-copy h2 { font-size: 30px; }
.example-copy>p:not(.eyebrow) { margin-top: 20px; }
.example-media.multiple { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; align-items: start; }
.example-detail { grid-column: 1/-1; }
.example-detail p { font-size: 14px; max-width: 850px; }
.example-pagination { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 36px; border-top: 1px solid var(--line); padding-top: 25px; }
.before-start { margin-top: 24px; max-width: 750px; }
.before-start ol { margin: 12px 0 20px; padding-left: 22px; }
.before-start li { margin-block: 8px; }
.guide-heading { max-width: 750px; }
.guide-heading p:not(.eyebrow) { margin-top: 18px; }
.guide-steps { padding: 0; list-style: none; max-width: 880px; margin-top: 36px; }
.guide-steps>li { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 24px; border-top: 1px solid var(--line); padding-block: 28px; scroll-margin-top: 200px; }
.step-number { color: var(--green); font-weight: 700; }
.guide-steps h3 { font-size: 23px; }
.guide-steps p { margin-top: 16px; }
.guide-tip { display: flex; gap: 10px; font-size: 14px; }
.guide-tip svg { margin-top: 3px; color: var(--green); }
.step-image { margin-top: 18px; }
.step-image>summary { font-size: 14px; }
.step-image>.product-shot { margin-top: 12px; }
.guide-finish { border-top: 1px solid var(--line); padding-top: 32px; margin-top: 20px; }
.guide-finish p { margin-block: 15px; }
.restock-diagram { border: 1px solid var(--line); border-radius: 6px; padding: 25px; }
.restock-diagram figcaption { font-weight: 700; }
.restock-diagram ol { list-style: none; padding: 0; }
.restock-diagram li { display: grid; gap: 8px; padding-block: 20px; border-bottom: 1px solid var(--line); }
.restock-diagram li svg { color: var(--green); }
.restock-diagram li span,.restock-diagram p { font-size: 14px; color: var(--muted); }
.restock-diagram p { margin-top: 18px; }
.not-found { padding-block: 90px; }
.not-found p { margin-block: 20px; }
.not-found .text-link { margin-left: 24px; }
#image-viewer { border: 0; border-radius: 6px; padding: 0; width: min(1120px,calc(100% - 40px)); height: min(94svh,1100px); max-width: none; max-height: none; color: var(--ink); background: #fff; }
#image-viewer[open] { display: flex; flex-direction: column; }
#image-viewer::backdrop { background: #0b211be6; }
.viewer-top { display: flex; align-items: center; gap: 20px; padding: 12px 20px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.viewer-top p { font-size: 14px; color: var(--ink); margin-right: auto; }
.viewer-body { overflow: auto; padding: 22px; min-height: 0; overscroll-behavior: contain; }
.viewer-body { flex: 1; display: flex; justify-content: center; align-items: flex-start; }
.viewer-body img { width: auto; max-width: 100%; height: auto; margin-inline: auto; object-fit: contain; }
#image-viewer[data-mode="fit"] .viewer-body { align-items: center; }
#image-viewer[data-mode="fit"] .viewer-body img { max-height: 100%; }
#image-viewer[data-mode="width"] .viewer-body img { width: 100%; max-height: none; }
.viewer-controls { display: flex; gap: 4px; flex-shrink: 0; }
.viewer-controls .icon-button { border: 0; }
.viewer-controls .icon-button[aria-pressed="true"] { background: var(--mint); color: var(--deep); }

@supports (grid-template-rows: subgrid) {
 .screen-pair { row-gap: 0; }
 .screen-pair>article { display: grid; grid-template-rows: subgrid; grid-row: span 4; }
 .simulation-gallery-grid { row-gap: 0; }
 .simulation-gallery-grid>article { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
}

@media(max-width:1100px) {
 .desktop-nav,.header-cta { display: none; }
 .menu-button { display: inline-grid; margin-left: 0; }
 .mobile-registration { display: inline-flex; margin-left: auto; flex-shrink: 0; }
 .menu-button { margin-left: 0; flex-shrink: 0; }
 .wrap { width: min(100% - 56px,960px); }
 .screen-pair,.split-heading,.foundation-strip,.story-row { gap: 40px; }
 .benefit-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
 .simulation-gallery-grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
 .simulation-gallery-grid>article { display: flex; grid-row: auto; grid-template-rows: none; max-width: 480px; margin-inline: auto; width: 100%; }
 .simulation-gallery-grid .product-shot { width: 100%; max-width: 358px; }
}
@media(max-width:800px) {
 h1 { font-size: 38px; }
 h2 { font-size: 32px; }
 .section { padding-block: 55px; }
 .screen-pair,.story-row,.split-heading,.foundation-strip,.faq-grid,.guarantee-band,.feature-story { grid-template-columns: minmax(0,1fr); gap: 30px; }
 .screen-pair>article { display: block; grid-row: auto; grid-template-rows: none; }
 .feature-story-reverse .feature-copy,.feature-story-reverse .feature-media { grid-column: auto; grid-row: auto; }
 .feature-story { padding-block: 12px; }
 .screen-pair { gap: 44px; }
 .screen-pair article>p:not(.eyebrow) { max-width: 600px; }
 .simulation-gallery-grid { grid-template-columns: minmax(0,1fr); gap: 36px; }
 .simulation-gallery-grid article { max-width: 480px; margin-inline: auto; }
 .simulation-gallery-grid h4,.simulation-gallery-grid article>p:not(.eyebrow) { min-height: 0; }
 .simulation-gallery-grid .product-shot { width: 100%; max-width: 340px; }
 .package-grid { grid-template-columns: minmax(0,1fr); max-width: 600px; margin-inline: auto; }
 .package-option { padding: 25px; }
 .package-heading { min-height: 0; }
 .other-grid { grid-template-columns: minmax(0,1fr); gap: 28px; }
 .footer-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 30px; }
 .footer-grid>div:first-child { grid-column: 1/-1; }
 .example-panel { grid-template-columns: minmax(0,1fr); gap: 30px; }
 .selection-bar .wrap { flex-wrap: wrap; gap: 8px 16px; }
 .selection-bar label { width: 100%; }
 .selection-bar select { flex: 1; min-width: 0; }
 .evidence-list>div { grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: 24px; }
}
@media(max-width:660px) {
 :root { --header: 65px; }
 body { font-size: 16px; }
 .wrap { width: calc(100% - 40px); }
 .header-inner { gap: 14px; }
 .brand img { width: 145px; }
 h1 { font-size: 34px; }
 h2 { font-size: 29px; }
 h3 { font-size: 24px; }
 .section-heading { margin-bottom: 28px; }
 .section-heading>p:last-child:not(.eyebrow) { margin-top: 16px; }
 .eyebrow { font-size: 12px; margin-bottom: 12px; }
 .video-first-hero { padding: 14px 0 16px; }
 .video-first-hero h1 { font-size: 28px; }
 .video-first-hero .hero-summary { font-size: 14px; margin: 5px auto 12px; }
 .demo-player video { height: min(52svh,max(180px,calc(100svh - 360px)),520px); }
 .demo-context { font-size: 10px; }
 .demo-next { flex-direction: column; gap: 4px; }
 .demo-main-actions .button { padding: 11px 12px; font-size: 13px; }
 .demo-main-actions { width: 100%; max-width: 350px; }
 .demo-main-actions>a { flex: 1; }
 .demo-play { gap: 8px; }
 .demo-play-icon { width: 54px; height: 54px; }
 .demo-play-label { font-size: 12px; }
 .benefit-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
 .benefit-link { grid-template-columns: 28px minmax(0,1fr) 18px; gap: 14px; padding: 18px; align-items: start; }
 .benefit-link>div { grid-column: 2; }
 .benefit-arrow { grid-column: 3; }
 .benefit-grid h3 { font-size: 18px; }
 .benefit-grid p { margin-top: 7px; }
 .benefit-icon svg { width: 24px; height: 24px; }
 .benefit-grid p { font-size: 14px; }
 .overview-foot .text-link { margin-left: 0; display: flex; width: max-content; max-width: 100%; }
 .manager-route { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 20px; margin-block: 25px 30px; }
 .manager-route li { font-size: 12px; gap: 8px; }
 .simple-process { display: grid; grid-template-columns: minmax(0,1fr); gap: 13px; margin-block: 24px 30px; }
 .simple-process li { font-size: 14px; }
 .screen-pair h3 { font-size: 24px; }
 .screen-pair .mobile-capture { width: 100%; max-width: 358px; }
 .screen-pair .product-shot { margin-top: 24px; }
 .evaluation-examples { grid-template-columns: minmax(0,308px); gap: 36px; }
 .simulation-gallery { padding-block: 32px; margin-top: 32px; }
 .simulation-gallery .section-heading h3 { font-size: 27px; }
 .simulation-gallery-grid { gap: 32px; }
 .simulation-gallery-grid h4 { font-size: 21px; }
 .operations-examples { grid-template-columns: minmax(0,1fr); gap: 32px; }
 .operations-examples article:last-child .product-shot { max-width: 360px; margin-inline: auto; }
 .section-links { align-items: flex-start; gap: 12px 22px; }
 .key-note { gap: 10px; padding-block: 17px; }
 .supporting-list li { grid-template-columns: 23px minmax(0,1fr); gap: 9px 14px; }
 .supporting-list .text-link { grid-column: 2; justify-self: start; }
 .package-option { padding: 22px; }
 .package-option h3 { font-size: 24px; }
 .package-price { font-size: 32px; }
 .package-comparison table { display: block; font-size: 14px; }
 .package-comparison caption { display: block; }
 .package-comparison thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
 .package-comparison tbody { display: block; }
 .package-comparison tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 20px; padding-block: 18px; border-top: 1px solid var(--line); }
 .package-comparison th[scope="row"] { grid-column: 1/-1; }
 .package-comparison th,.package-comparison td { border: 0; padding: 0; overflow-wrap: anywhere; }
 .package-comparison td::before { display: block; color: var(--deep); font-weight: 700; font-size: 12px; margin-bottom: 5px; }
 .package-comparison td:nth-child(2)::before { content: 'Kendali Harian'; }
 .package-comparison td:nth-child(3)::before { content: 'Manager Usaha'; }
 .guarantee-band { gap: 24px; }
 .start-steps { grid-template-columns: minmax(0,1fr); gap: 24px; }
 .start-steps li { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 7px 14px; }
 .start-steps h3 { margin: 0; font-size: 21px; }
 .start-steps p { grid-column: 2; margin: 0; }
 .footer-grid { grid-template-columns: minmax(0,1fr); }
 .footer-grid>div:first-child { grid-column: auto; }
 .page-intro { padding-block: 24px 40px; }
 .page-intro>p:not(.eyebrow) { font-size: 16px; margin-top: 18px; }
 .back-link { margin-bottom: 23px; }
 .page-jumps { gap: 4px 20px; margin-top: 25px; padding-top: 12px; }
 .page-jumps a { font-size: 13px; }
 .detail-steps li { gap: 12px; grid-template-columns: 27px minmax(0,1fr); padding-block: 22px; }
 .detail-steps h3 { font-size: 21px; }
 .evidence-list>div { grid-template-columns: minmax(0,1fr); gap: 8px; }
 .evidence-list dt { font-size: 19px; }
 .promo-package-lines { grid-template-columns: minmax(0,1fr); gap: 30px; }
 .promo-package-lines h3 { font-size: 23px; }
 .next-action .button { margin-right: 0; }
 .next-action>.wrap>.text-link { display: flex; justify-content: flex-start; margin-right: 0; width: max-content; max-width: 100%; }
 .example-media.multiple { grid-template-columns: minmax(0,1fr); gap: 25px; }
 .example-copy h2 { font-size: 27px; }
 .example-count { font-size: 11px; }
 .examples-main,.guide-main { padding-block: 30px 45px; scroll-margin-top: 200px; }
 .example-pagination { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; }
 .guide-steps>li { gap: 12px; grid-template-columns: 22px minmax(0,1fr); }
 .guide-steps h3 { font-size: 21px; }
 #image-viewer { width: calc(100% - 16px); height: calc(100svh - 24px); }
 .viewer-top { padding: 10px 12px; gap: 12px; }
 .viewer-top p { font-size: 12px; }
 .viewer-body { padding: 12px; }
 .viewer-top { flex-wrap: wrap; }
 .viewer-top p { width: calc(100% - 156px); margin: 0; }
 .viewer-controls { margin-left: auto; }
}
@media(max-width:360px) {
 .wrap { width: calc(100% - 32px); }
 .benefit-link { padding: 16px; gap: 10px; grid-template-columns: 25px minmax(0,1fr) 18px; }
 .selection-bar .example-count { width: 100%; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior: auto; }
 *,*::before,*::after { animation: none !important; transition: none !important; }
}

.custom-offer { background: #f1f5f9; }
.custom-offer-heading { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 56px; align-items: end; }
.custom-offer h2 { max-width: 730px; }
.custom-offer-heading p { margin-top: 20px; }
.custom-offer-aside { padding-left: 26px; border-left: 2px solid #365c88; }
.custom-offer-aside .button { margin-top: 20px; }
.custom-intro { max-width: 960px; padding-block: 28px 36px; }
.custom-intro .back-link { margin-bottom: 20px; }
.custom-intro h1 { max-width: 800px; font-size: 40px; }
.page-intro .custom-lead { font-size: 24px; font-weight: 650; color: var(--deep); max-width: 750px; }
.custom-intro>p:last-of-type { max-width: 800px; }
.custom-proof { background: #f7faf8; }
.custom-screen-pair { display: grid; grid-template-columns: repeat(2,minmax(0,340px)); justify-content: center; gap: 70px; margin-top: 36px; }
.custom-screen-pair h3 { font-size: 20px; margin-bottom: 18px; }
.custom-screen-pair .product-shot { width: 100%; }
.custom-screen-pair img { width: 100%; }
.custom-capabilities { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 48px; margin-top: 30px; }
.custom-capabilities li { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 17px; border-top: 1px solid var(--line); padding: 25px 0; }
.custom-capabilities svg { color: #365c88; margin-top: 3px; }
.custom-capabilities h3 { font-size: 21px; margin-bottom: 10px; }
.custom-os { background: #eff6f5; }
.custom-intro-text { max-width: 830px; margin-top: 22px; }
.custom-flow { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px; list-style: none; padding: 0; margin-top: 36px; }
.custom-flow li { border-top: 2px solid #8faeb0; padding-top: 20px; }
.custom-flow h3 { font-size: 20px; margin: 14px 0 12px; }
.custom-flow span { color: var(--deep); }
.custom-showroom-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 44px; align-items: start; }
.custom-showroom-grid h3 { font-size: 21px; margin: 22px 0 12px; }
.custom-showroom-image { min-width: 0; }
.custom-showroom-image img { width: 100%; height: auto; aspect-ratio: 1280 / 925; border: 1px solid var(--line); border-radius: 5px; }
.custom-showroom-image figcaption { font-size: 12px; color: var(--muted); margin-top: 12px; }
.custom-delivery { list-style: none; padding: 0; margin-top: 30px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px; counter-reset: delivery; }
.custom-delivery li { counter-increment: delivery; border-top: 1px solid var(--line); padding-top: 22px; }
.custom-delivery li::before { content: '0' counter(delivery); display: block; color: #365c88; font-size: 13px; font-weight: 700; margin-bottom: 14px; }
.custom-delivery h3 { font-size: 20px; margin-bottom: 10px; }
.custom-commercial { margin-top: 38px; border-top: 1px solid var(--line); }
.custom-commercial>div { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 20px; border-bottom: 1px solid var(--line); padding-block: 18px; }
.custom-commercial dt { font-weight: 650; }
.custom-commercial dd { color: var(--muted); }
.custom-contact { background: #f1f5f9; }
.custom-contact p { max-width: 760px; margin-top: 18px; }
@media (max-width:1100px) {
 .desktop-nav { gap: 14px; }
 .header-inner { gap: 18px; }
}
@media (max-width:900px) {
 .custom-offer-heading,.custom-showroom-grid { grid-template-columns: minmax(0,1fr); gap: 30px; }
 .custom-offer-aside { padding-left: 20px; }
 .custom-flow,.custom-delivery { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; }
 .custom-screen-pair { gap: 32px; }
}
@media (max-width:660px) {
 .custom-intro h1 { font-size: 32px; }
 .page-intro .custom-lead { font-size: 21px; }
 .custom-capabilities,.custom-flow,.custom-delivery { grid-template-columns: minmax(0,1fr); }
 .custom-screen-pair { grid-template-columns: minmax(0,340px); gap: 36px; }
 .custom-capabilities { margin-top: 24px; }
 .custom-commercial>div { grid-template-columns: minmax(0,1fr); gap: 6px; }
 .custom-offer-heading { gap: 20px; }
 .custom-offer-aside p { margin-top: 0; }
 .custom-intro .section-links>.button { width: 100%; }
}