/* TUDI homepage (EN / and ID /beranda/, plus the two technology drafts). Loaded after strategy.css on pages whose
   content carries the photo hero or the DERAS system flow. */
/* Hero: the photograph is a full-bleed background at every breakpoint; copy and actions sit above it. */
.photo-hero{position:relative;background:var(--paper);isolation:isolate;margin-block-start:0!important}
.photo-hero .hero-photo{margin:0;position:absolute;inset:0;z-index:0;overflow:hidden}
.photo-hero .hero-photo picture{display:block;width:100%;height:100%}
.photo-hero>.wrap{position:relative;z-index:1;margin-block:0!important}
.photo-hero .hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
/* Tall desktop windows otherwise crop the tagged tote off the right edge. */
@media(min-width:1101px) and (max-aspect-ratio:4/3){.strategy-home .hero-photo img{object-position:70% center}}
.photo-hero .hero-photo:after{content:'';position:absolute;inset:0}
.photo-hero .hero-copy{padding:85px 0 95px;display:flex;flex-direction:column;justify-content:center;animation:none}
.photo-hero .hero-copy h1{margin:0 0 25px}
.photo-hero .hero-copy .lead{font-size:17px;color:#3e494e}
.photo-hero .button.secondary{background:#f6f5f1d9;border-color:#878b87}
.photo-hero .hero-link{margin:18px 0 0;font-size:15px}
.photo-hero .hero-link a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
.photo-hero .hero-link a:hover{color:var(--wine)}
.photo-hero .button.secondary:hover{background:#fff}
/* The AI-illustration disclosure is the photograph's own caption. */
.photo-hero .hero-caption{position:absolute;z-index:1;right:max(5.5%,calc((100% - 1360px)/2));bottom:18px;max-width:min(520px,50%);margin:0;padding:6px 11px;border-radius:2px;background:#f6f5f1e3;color:#34403f;font-size:12px;line-height:1.45}
.wp-block-post-content.is-layout-flow>*{margin-block-start:0}
/* Partner rows: the base row and track rules the DERAS technology carousel builds on. */
.partners{background:var(--paper);border-top:1px solid var(--line);padding:22px 0;overflow-anchor:none}
.partner-rows{display:grid;gap:4px;min-width:0}
.partner-row{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center}
.partner-label{margin:0;font-size:12px;font-weight:600;line-height:1.3;color:#465157}
.partner-viewport{min-width:0}
.partner-track{display:flex;flex-wrap:wrap;align-items:center;gap:6px 44px;margin:0;padding:0;list-style:none}
.partner-track>li{display:flex;align-items:center;min-height:52px;margin:0}
/* The saved section markup carries .is-moving: one unwrapped line per row. */
.partners.is-moving .partner-viewport{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
.partners.is-moving .partner-track{flex-wrap:nowrap;gap:0;width:max-content}
.partners.is-moving .partner-track>li{padding-inline:22px}
@media(max-width:1100px){.photo-hero .hero-copy{padding:55px 0}}
@media(min-width:768px) and (max-width:1100px){.photo-hero .hero-photo img{object-position:70% center}}
@media(max-width:767px){.photo-hero .wrap{width:88%}.photo-hero .hero-copy{justify-content:flex-start}.photo-hero .hero-caption{left:6%;right:auto}.partners{padding:20px 0 16px}.partner-row{grid-template-columns:minmax(0,1fr)}.partner-track{gap:0 32px}.partner-track>li{min-height:46px}.partners.is-moving .partner-viewport{margin-inline:-6vw}.partners.is-moving .partner-track>li{padding-inline:18px}}
/* Full-screen hero: the section fills the first viewport below the sticky header (and admin bar), so the title
   owns the first screen. The title scales with viewport width and height, so the actions stay above the fold. */
.strategy-home{--hero-top:84px;display:flex;flex-direction:column;min-height:calc(100svh - var(--hero-top))}
.admin-bar .strategy-home{--hero-top:116px}
.strategy-home>.wrap{flex:1;display:flex}
.strategy-home .hero-copy{width:min(66%,960px);min-height:0;padding-block:clamp(40px,6svh,64px) clamp(56px,9svh,96px)}
.strategy-home .hero-copy h1{font-size:clamp(48px,min(6.6vw,11.5svh),100px);max-width:none;line-height:.98;letter-spacing:-.045em;text-wrap:balance;margin-bottom:clamp(20px,3.5svh,32px)}
.strategy-home .hero-copy .lead{max-width:490px}
.strategy-home .hero-copy .actions{max-width:540px}
.strategy-home .home-explore-cue{display:inline-flex;align-items:center;align-self:flex-start;gap:10px;min-height:44px;margin-top:clamp(12px,2svh,20px);color:var(--ink);font-size:14px;font-weight:600;line-height:1.35;text-decoration:none}
.strategy-home .home-explore-cue svg{box-sizing:border-box;flex:none;width:36px;height:36px;padding:7px;border:1px solid currentColor;border-radius:50%}
.strategy-home .home-explore-cue:hover{color:var(--wine)}
.strategy-home .home-explore-cue:focus-visible{outline:3px solid var(--wine);outline-offset:4px;border-radius:4px}
.strategy-home .hero-photo:after{background:linear-gradient(90deg,#f6f5f1f7 0%,#f6f5f1eb 38%,#f6f5f170 60%,transparent 80%)}
/* Generated operational artwork leaves quiet space for the heading at left. */
.strategy-home .hero-photo--illustrated:after{background:linear-gradient(90deg,#f6f5f1e8 0%,#f6f5f1bf 36%,#f6f5f180 60%,transparent 80%)}
.strategy-routing h2{margin-bottom:32px}
.strategy-routing #tudi-needs{scroll-margin-top:110px}
@media(max-width:1100px){.strategy-home{--hero-top:80px}.admin-bar .strategy-home{--hero-top:112px}.strategy-home .hero-copy{width:78%}.strategy-home .hero-copy h1{font-size:clamp(48px,min(8.4vw,9svh),84px)}}
@media(max-width:782px){.admin-bar .strategy-home{--hero-top:126px}}
@media(max-width:767px){.strategy-home{--hero-top:76px}.strategy-home .hero-copy{width:100%;padding:40px 0 80px}.strategy-home .hero-copy h1{font-size:clamp(40px,min(11.5vw,7.4svh),64px);max-width:600px}.strategy-home .hero-photo:after{background:linear-gradient(90deg,#f6f5f1ed 0%,#f6f5f1c2 60%,#f6f5f133 100%),linear-gradient(180deg,#f6f5f1a3 0%,transparent 60%)}.strategy-home .hero-photo img{object-position:82% center}.strategy-home .hero-copy .lead{font-size:16px;max-width:440px}.strategy-home .hero-caption{max-width:85%;font-size:11px;bottom:14px}}
.strategy-home .hero-photo--illustrated img{object-position:72% center}
@media(max-width:767px){
 .strategy-home .hero-photo--illustrated img{height:100%;object-position:76% center}
 .strategy-home .hero-photo--illustrated:after{background:linear-gradient(180deg,#f6f5f1 0%,#f6f5f1fa 24%,#f6f5f1f2 44%,#f6f5f1ce 58%,#f6f5f13d 75%,transparent 90%)}
 .strategy-home .hero-photo--illustrated~.wrap .hero-copy h1{margin-bottom:16px}
 .strategy-home .hero-photo--illustrated~.wrap .hero-copy .lead{margin-top:12px}
 .strategy-home .hero-photo--illustrated~.wrap .hero-copy .actions{gap:8px;margin-top:18px}
 .strategy-home .hero-photo--illustrated~.wrap .hero-copy .actions .button{font-size:13px;padding-inline:12px}
 .strategy-home .hero-photo--illustrated~.wrap .home-explore-cue{margin-top:8px;padding-right:8px;border-radius:22px;background:#f6f5f1df}
}
@media(max-width:370px) and (max-height:650px){.strategy-home .hero-copy{padding-block:24px 40px}.strategy-home .hero-copy h1{margin-bottom:12px}.strategy-home .hero-copy .lead{font-size:15px;line-height:1.5;margin-top:14px}.strategy-home .hero-copy .actions{gap:8px;margin-top:14px}.strategy-home .hero-copy .actions .button{padding-block:10px}.strategy-home .home-explore-cue{margin-top:4px}}
@media(max-width:370px) and (max-height:650px){.strategy-home .hero-photo--illustrated img{object-position:76% center}}
/* The saved first picture stays underneath four on-demand, decorative scenes. */
.strategy-home .hero-photo--illustrated .hero-rotating-picture{position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;transition:opacity .75s ease}
.strategy-home .hero-photo--illustrated .hero-rotating-picture.is-visible{z-index:1;opacity:1}
.strategy-home .hero-photo--illustrated .hero-rotating-picture.is-incoming{z-index:2}
.strategy-home .hero-photo--illustrated:after{z-index:3;pointer-events:none}
.strategy-home .hero-rotating-picture img{object-position:72% center}
.strategy-home .hero-image-toggle{position:absolute;z-index:2;right:max(5.5%,calc((100% - 1360px)/2));bottom:22px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--wine);border-radius:50%;background:#f6f5f1eb;color:var(--wine);cursor:pointer}
.strategy-home .hero-image-toggle[hidden]{display:none}
.strategy-home .hero-image-toggle:hover{background:#fff}
.strategy-home .hero-image-toggle:focus-visible{outline:3px solid var(--wine);outline-offset:3px}
.strategy-home .hero-image-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:767px){.strategy-home .hero-rotating-picture{background:var(--paper)}.strategy-home .hero-rotating-picture img{height:100%;object-position:var(--phone-focus,90% center);transform:translateY(var(--phone-shift,0))}.strategy-home .hero-image-toggle{right:6%;bottom:18px}}
@media(prefers-reduced-motion:reduce){.strategy-home .hero-rotating-picture{transition:none}}
.combined-routing .routing-intro{color:var(--muted);margin:0 0 32px}
.combined-routing h2{margin-bottom:16px}
.routing-actions{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-top:32px;padding-top:26px;border-top:1px solid var(--line)}
.routing-actions p{margin:0 0 12px;font-size:15px}
.routing-actions .actions{margin:0}
.deras-connection .bridge-intro{text-align:center;margin-inline:auto}
.deras-connection h2{margin-top:0}
.bridge-intro{max-width:65ch;color:var(--muted)}
.deras-bridge.partners{background:transparent;border:0;padding:0;overflow:hidden}
.bridge-flow.partner-rows{display:block}
.deras-bridge .bridge-brand-row{display:block;text-align:center}
.deras-bridge .partner-label{margin:0 0 18px;font-weight:600;line-height:1.4;color:var(--ink)}
.deras-bridge .partner-track{justify-content:center;gap:12px 46px}
.deras-bridge.is-moving .partner-track{justify-content:flex-start;gap:0}
.bridge-core{display:grid;align-items:center;background:#202b32;color:var(--paper)}
.bridge-sample{min-width:0}
.bridge-sample .deras-stream{border:0;background:transparent}
.bridge-sample .system-top{padding:0 0 10px}
.bridge-sample .system-top b{color:var(--paper)}
.bridge-sample .log-head{color:#a4b4ba}
.bridge-sample .j-key{color:#9cacb2}
@media(max-width:767px){.routing-actions{align-items:start;flex-direction:column;gap:12px}.routing-actions .actions{gap:10px}.deras-bridge .partner-track{gap:12px 26px}}
@media(prefers-reduced-motion:reduce){.deras-bridge .partner-track{flex-wrap:wrap;justify-content:center}.deras-bridge .partner-viewport{mask-image:none;-webkit-mask-image:none}}
.bridge-core :focus-visible{outline-color:var(--paper)}
/* 21st.dev Logo Cloud + Animated Beam patterns, adapted for native WordPress. */
.hero-emphasis{color:var(--wine)}
/* Same three columns and gap as .solution-paths so the intro starts on the third card's edge. */
.routing-heading{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:24px;margin-bottom:44px}
.strategy-routing .routing-heading h2{margin:0;max-width:12ch;grid-column:span 2}
.routing-heading .routing-intro{margin:0!important;max-width:45ch;color:var(--muted)}
/* Start with what you need: three buyer outcomes as divider-topped columns, each leading to its concrete pages. */
.solution-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.solution-path{display:flex;flex-direction:column;margin:0;padding:28px 26px 8px;background:#fff;border:1px solid var(--line);border-radius:12px}
.solution-path-icon{display:block;width:32px;height:32px;color:var(--wine)}
.solution-path h3{margin:18px 0 8px;font-size:24px;line-height:1.2;letter-spacing:-.015em}
.solution-path>p{margin:0 0 22px;font-size:15px;line-height:1.6;color:var(--muted)}
.solution-path ul{margin:auto 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.solution-path li{margin:0}
.solution-path li+li{border-top:1px solid var(--line)}
.solution-path li a{position:relative;display:flex;align-items:center;min-height:48px;padding:10px 28px 10px 0;font-size:15px;font-weight:600;line-height:1.35;color:var(--ink);text-decoration:none;transition:color .2s}
.solution-path li a:after{content:'';position:absolute;right:6px;top:50%;width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translateY(-50%) rotate(45deg);transition:right .2s}
.solution-path li a:hover{color:var(--wine)}
.solution-path li a:hover:after{right:2px}
.routing-hardware{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.routing-hardware p{margin:0;color:var(--ink);font-size:15px;font-weight:600}
.routing-hardware .button{margin:0;flex:none}
/* The direct route closes the page, for visitors who already know the project or the hardware. */
.home-next-step.strategy-section{padding-block:56px}
/* Closing band: heading and reassurance on the left, one row of buttons on the right (buttons only, no text links). */
.home-next-step .routing-actions{margin:0;padding:0;border:0;display:flex;align-items:center;justify-content:space-between;gap:24px 48px;flex-wrap:wrap}
.home-next-step .next-step-title{margin:0 0 8px;font-size:clamp(26px,2.4vw,32px);line-height:1.2;letter-spacing:-.02em}
.home-next-step .next-step-note{margin:0;font-size:14px;color:var(--muted)}
.home-next-step .actions{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.home-next-step .actions .button{margin:0}
.home-next-step .button-whatsapp{gap:10px}
.home-next-step .button-icon{flex:none;color:#1f8f4e}
.home-next-step .button.secondary:hover{background:#fff;color:var(--ink);border-color:var(--ink)}
@media(max-width:1100px){.solution-paths{gap:16px}.solution-path{padding:24px 20px 6px}.solution-path h3{font-size:21px}}
@media(max-width:767px){.solution-paths{grid-template-columns:1fr;gap:14px}.solution-path{padding:22px 20px 6px}.routing-hardware{align-items:flex-start;flex-direction:column}.home-next-step.strategy-section{padding-block:40px}.home-next-step .actions{flex-direction:column;align-items:stretch;width:100%}}
.deras-connection{background:#efeee8;padding-block:64px 40px}
.deras-connection h2{max-width:900px}
.deras-bridge.partners{margin-top:0}
.deras-bridge .partner-viewport{margin-inline:0!important}
.bridge-core{margin-inline:auto;position:relative}
.bridge-sample .stream-console{border-radius:4px}
@media(max-width:1100px){.routing-heading{grid-template-columns:1fr;gap:18px}.strategy-routing .routing-heading h2{grid-column:auto}}
@media(max-width:767px){.routing-heading{grid-template-columns:1fr;gap:18px;margin-bottom:30px}.strategy-routing .routing-heading h2{max-width:16ch}.deras-connection{padding-block:42px 30px}.deras-connection h2{font-size:29px}}
@media(prefers-reduced-motion:reduce){.deras-bridge .partner-track{gap:16px 24px}}
/* Compact DERAS hub: authentic wordmark, one sentence and a short sample strip. */
.bridge-sample .system-top{padding-bottom:8px}
.bridge-sample .system-top b span{font-size:12px}
.bridge-sample .log-head{display:none}
.bridge-sample .log-entry{grid-template-columns:16ch minmax(0,1fr);gap:8px;padding-inline:10px}
@container(max-width:470px){.bridge-sample .log-entry{grid-template-columns:minmax(0,1fr);gap:0}}
/* Focused explainer: narrow device-to-system diagram, one small central hub. */
.deras-connection .wrap{max-width:1120px}
.deras-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:center}
.deras-explainer h2{text-align:left;max-width:13ch;font-size:clamp(30px,2.8vw,38px);margin:0 0 22px}
.deras-connection .deras-explainer .bridge-intro{text-align:left;font-size:16px;line-height:1.7;margin:0;max-width:37ch}
.deras-diagram{min-width:0;width:100%;max-width:620px;margin-inline:auto}
.deras-bridge .bridge-brand-row{padding:4px 0}
.deras-bridge .partner-label{margin-bottom:10px;font-size:13px}
.deras-bridge .partner-track>li{padding-inline:20px;min-height:48px}
.bridge-core{width:90%;max-width:540px;grid-template-columns:1fr;gap:10px;padding:18px 20px;border-radius:10px}
.bridge-sample .system-top{display:none}
.bridge-sample .stream-console{margin:0;font-size:11px;line-height:1.6}
.bridge-sample .stream-log{height:70px;padding-block:3px 6px;mask-image:linear-gradient(to bottom,transparent,#000 20px);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 20px)}
@media(max-width:900px){.deras-layout{gap:32px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.bridge-core{width:100%;padding:16px}.deras-explainer h2{font-size:31px}}
@media(max-width:650px){.deras-layout{grid-template-columns:1fr}.deras-explainer h2{max-width:20ch;font-size:30px;margin-bottom:16px}.deras-connection .deras-explainer .bridge-intro{max-width:none}.deras-diagram{max-width:500px}.bridge-core{width:94%}.deras-bridge .partner-track>li{padding-inline:18px}.deras-layout{gap:18px}}
/* Compact identity beside the payload; one uncluttered middleware explanation. */
.bridge-hub{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:18px;margin-inline:auto}
.bridge-hub-brand{margin:0;line-height:1}
.bridge-hub-brand img{display:block;width:100%;height:auto}
.bridge-hub .bridge-core{width:100%;padding:16px;min-width:0}
@media(max-width:900px){.bridge-hub{gap:12px}.bridge-hub .bridge-core{padding:12px}}
@media(max-width:650px){.bridge-hub .bridge-core{padding:10px}.bridge-hub .log-entry{padding-inline:6px}}
/* One white capsule unites DERAS identity with its taller event stream. */
.bridge-hub{background:#fff;border-radius:24px;padding:18px;width:100%;box-sizing:border-box}
.bridge-hub .stream-log{height:132px}
@media(max-width:900px){.bridge-hub{padding:14px;grid-template-columns:80px minmax(0,1fr)}}
@media(max-width:650px){.bridge-hub{padding:12px;gap:10px;grid-template-columns:88px minmax(0,1fr);border-radius:20px}.bridge-hub .stream-log{height:144px}}
.deras-explainer .button{margin-top:20px}
/* Separate unpublished technology-led DERAS concept. */
.technology-draft .technology-name{white-space:nowrap}
.technology-draft .deras-explainer h2{max-width:16ch}
.technology-draft .partner-track>li{padding-inline:22px}
/* Symbols carry the concept; short labels keep each technology unambiguous. */
.technology-draft .partner-track>li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:8px 20px;min-width:112px;min-height:92px;box-sizing:border-box}
.technology-draft .technology-symbol{display:block;width:36px;height:36px;flex:none;color:var(--wine)}
.technology-draft .technology-name{font-size:12px;line-height:1.4;font-weight:600;letter-spacing:0;color:var(--ink)}
@media(max-width:650px){.technology-draft .partner-track>li{min-width:100px;padding-inline:16px}.technology-draft .technology-symbol{width:32px;height:32px}}
/* Video-inspired flow: stationary technology sources and synchronized system updates. */
.system-flow .bridge-beams{display:block;width:82%;height:36px;margin-inline:auto;visibility:hidden}
.system-flow .partner-viewport{mask-image:none;-webkit-mask-image:none;overflow:visible}
.system-flow .partner-track{grid-template-columns:repeat(8,minmax(0,1fr));padding:0;margin:0;list-style:none}
.system-flow .partner-track>li{min-width:0;min-height:88px;gap:8px}
.system-flow .technology-symbol{box-sizing:content-box;transition:border-color .25s,background .25s}
.system-flow .technology-name{white-space:normal;font-size:10px;text-align:center}
.system-flow .partner-track>li.is-active .technology-symbol{border-color:var(--wine)}
.system-destinations>.partner-label{text-align:center;margin:8px 0 8px!important}
.system-example-note{position:relative;width:fit-content;max-width:68ch;margin:0 auto 18px;padding-inline:10px;background:#efeee8;text-align:center;color:#465157;font-size:13px;line-height:1.5}
.system-destination-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.system-destination{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;min-width:0}
.system-receipts{height:80px;overflow:hidden}
.system-receipts p{margin:0;padding:7px 0;border-top:1px solid var(--line);font-size:10px;line-height:1.4}
.system-receipts b,.system-receipts span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.system-receipts b{color:var(--wine);font-weight:600}
.system-receipts span{color:var(--ink)}
@media(max-width:900px){.system-flow .partner-track{grid-template-columns:repeat(4,minmax(0,1fr))}.system-destination-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.system-flow .technology-symbol{transition:none}}
/* Source-aware carousel and one synchronized source -> DERAS -> systems path. */
.system-flow .deras-diagram{position:relative;isolation:isolate}
.system-flow .flow-overlay{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:visible;fill:none}
.flow-track{stroke:#bbb0aa;stroke-width:1}
.flow-packet{stroke:var(--wine);stroke-width:2;stroke-linecap:round;stroke-dasharray:12 100;opacity:0}
.technology-carousel{display:flex;align-items:center;justify-content:center;gap:4px}
.system-flow .deras-bridge .partner-viewport{overflow-x:auto!important;overflow-y:hidden;min-width:0;flex:1;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x pan-y}
.system-flow .partner-viewport::-webkit-scrollbar{display:none}
.system-flow .partner-track{display:flex!important;width:max-content!important;gap:0!important}
.system-flow .partner-track>li{flex:0 0 96px;padding:4px;scroll-snap-align:center}
.technology-choice{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;width:100%;min-height:90px;border:0;background:transparent;color:var(--ink);padding:0;cursor:pointer;font:inherit}
.system-flow .destination-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.destination-heading>img{width:calc(100% - 24px);height:25px;object-fit:contain;object-position:left center}
.notification-bell{width:17px;height:17px;flex:none;color:var(--muted)}
.system-destination{transition:border-color .25s,background-color .25s}
.system-destination.has-update{border-color:var(--wine);background:#fff7f7}
.has-update .notification-bell{color:var(--wine);animation:notification-ring .45s ease-in-out}
.system-flow .bridge-hub{position:relative;outline:none}
.system-flow .bridge-hub::after{content:"";position:absolute;inset:0;border:1px solid transparent;border-radius:inherit;pointer-events:none}
.system-flow .bridge-hub.is-receiving::after{animation:deras-received 1.1s ease-out}
@keyframes deras-received{0%,35%{border-color:var(--wine)}100%{border-color:transparent}}
@keyframes receipt-arrival{from{background:#f2e5e8;transform:translateY(4px)}to{background:#f6f5f1;transform:translateY(0)}}
.system-flow .has-update .receipt:first-child{animation:receipt-arrival .65s cubic-bezier(.16,1,.3,1)}
@media(prefers-reduced-motion:reduce){.system-flow .bridge-hub.is-receiving::after,.system-flow .has-update .receipt:first-child{animation:none}}
.system-flow .system-receipts p{min-height:56px;box-sizing:border-box}
@keyframes notification-ring{25%{transform:rotate(15deg)}75%{transform:rotate(-15deg)}}
@media(prefers-reduced-motion:reduce){.flow-packet{display:none}.notification-bell{animation:none!important}.system-destination,.system-flow .bridge-hub{transition:none}}
.system-flow .system-destinations>.partner-label{position:relative;width:fit-content;margin-inline:auto!important;background:#efeee8;padding-inline:8px}
.technology-choice:focus-visible{outline:2px solid var(--wine);outline-offset:2px;border-radius:4px}
/* Reference treatment: bare technology symbols and compact notification tiles. */
.system-flow .technology-symbol,.system-flow .partner-track>li.is-active .technology-symbol{width:36px;height:36px;padding:0;background:transparent;border:0;border-radius:0}
.system-flow .technology-choice{gap:12px}
.system-flow .technology-choice>.technology-name{font-size:12px;line-height:1.4;min-height:2.8em}
.system-flow .partner-track>li{width:112px;flex-basis:112px}
.system-flow .system-destination{padding:0;border-radius:12px;overflow:hidden;background:#fff}
.system-flow .destination-heading{position:relative;margin:0;border-bottom:1px solid var(--line)}
.system-flow .has-update .destination-heading:after{content:"";position:absolute;width:5px;height:5px;background:var(--wine);border-radius:50%;right:8px;top:10px}
/* Explicit receipt layout: the icon tile never inherits text-clamping rules. */
.system-flow .system-receipts{height:auto;padding:6px;display:grid;gap:6px}
.system-flow .system-receipts .receipt{display:grid;align-items:start;min-height:0;margin:0;padding:7px;border:0;border-radius:8px;background:var(--paper);overflow:visible}
.system-flow .system-receipts .receipt-icon{grid-column:1;display:flex;width:22px;height:22px;align-items:center;justify-content:center;flex:none;border-radius:5px;background:#f2e5e8;overflow:visible}
.system-flow .receipt-icon .technology-symbol{display:block;width:14px;height:14px;max-width:none;padding:0;margin:0;flex:none;color:var(--wine);background:none;border:0;border-radius:0}
.system-flow .system-receipts .receipt-body{grid-column:2;grid-row:2;min-width:0;padding:0;overflow:visible}
.system-flow .system-receipts .receipt b{display:block;font-size:11px;line-height:1.35;white-space:normal}
.system-flow .system-receipts .receipt-body>span{display:block;font-size:11px;line-height:1.4;white-space:normal;overflow:visible;text-overflow:clip;-webkit-line-clamp:unset;overflow-wrap:break-word}
.system-flow .system-receipts .receipt-time{position:static;justify-self:end;display:block;font-size:11px;color:#626c71;white-space:nowrap}
.system-flow .system-destination.has-update{background:#fff}
@media(max-width:650px){.system-flow .partner-track>li{width:102px;flex-basis:102px}}
.system-flow .deras-bridge .partner-viewport{mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 12px),transparent)!important;-webkit-mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 12px),transparent)!important}
/* Give four system cards enough reading width; use two columns in narrower diagrams. */
.system-flow .deras-layout{grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:48px}
.system-flow .deras-diagram{max-width:760px;container-type:inline-size}
.system-flow .system-destination-grid{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:10px}
.system-flow .system-destination{display:grid;grid-template-rows:48px 1fr}
.system-flow .destination-heading{box-sizing:border-box;height:48px;min-height:0;padding:10px;gap:8px}
.system-flow .destination-heading>img{min-width:0;width:calc(100% - 25px);max-width:112px;height:25px}
@container(max-width:639px){.system-flow .system-destination-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1180px){.system-flow .deras-layout{grid-template-columns:1fr;gap:28px}}
@media(max-width:650px){.system-flow .deras-layout{grid-template-columns:1fr;gap:18px}.system-flow .system-receipts{padding:5px}.system-flow .system-receipts .receipt{padding:6px}}
/* Receipts keep one height: the title stays on one line with the full text width, the time sits under the icon,
   and every receipt has room for a three-line outcome (the longest Bahasa outcomes need it). */
.system-flow .system-receipts{grid-template-rows:repeat(2,minmax(78px,1fr))}
.system-flow .system-receipts .receipt{position:relative;grid-template-columns:26px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:6px;row-gap:2px}
.system-flow .system-receipts .receipt-icon{grid-row:1 / 3;justify-self:center}
.system-flow .system-receipts .receipt-body{display:contents}
.system-flow .system-receipts .receipt b{grid-column:2;grid-row:1;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.system-flow .system-receipts .receipt-body>span{grid-column:2;grid-row:2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.system-flow .system-receipts .receipt-time{position:absolute;top:32px;left:7px;width:26px;text-align:center;line-height:1.2;font-variant-numeric:tabular-nums}
@media(max-width:650px){.system-flow .system-receipts{grid-template-rows:repeat(2,minmax(76px,1fr))}.system-flow .system-receipts .receipt{grid-template-columns:26px minmax(0,1fr)}.system-flow .system-receipts .receipt-time{top:31px;left:6px;width:26px}}
/* The active source is visible: wine label and a short bar beneath it. */
.system-flow .technology-choice{gap:8px}
.system-flow .flow-instruction{margin:2px 0 12px;color:var(--muted);font-size:14px;line-height:1.45;text-align:center}
.system-flow .technology-choice:after{content:'';width:18px;height:2px;border-radius:1px;background:transparent;transition:background-color .25s}
.system-flow .partner-track>li.is-active .technology-name{color:var(--wine)}
.system-flow .partner-track>li.is-active .technology-choice:after{background:var(--wine)}
/* The carousel window holds whole items: five on wider diagrams, three on phones. */
.system-flow .deras-bridge .partner-viewport{max-width:560px;margin-inline:auto}
@media(max-width:650px){.system-flow .deras-bridge .partner-viewport{max-width:306px}}
/* The sample-data note and the Pause control sit beneath the diagram. */
/* WCAG 2.2.2 pause control: a circled icon at the diagram's top-right; its text label stays available to screen readers. */
.system-flow .flow-footer{position:absolute;top:0;right:0;z-index:2;margin:0}
.system-flow .flow-selection-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.flow-toggle{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1.5px solid #878b87;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.flow-toggle:hover{border-color:var(--wine);background:#fff;color:var(--wine)}
.flow-toggle:focus-visible{outline:2px solid var(--wine);outline-offset:3px}
.flow-toggle[hidden]{display:none}
.flow-toggle>span:first-child{width:10px;height:12px;box-sizing:border-box;border-inline:3.5px solid currentColor}
.flow-toggle[data-state=paused]>span:first-child{width:11px;margin-left:3px;border:0;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.flow-toggle [data-toggle-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:650px){.system-flow .flow-footer{top:-12px}.flow-toggle>span:first-child{width:8px;height:10px;border-inline-width:3px}.flow-toggle[data-state=paused]>span:first-child{width:9px;margin-left:2px}}