/* A balanced API diagram and one clear, contextual finish to Enterprise. */
:is(.story-enterprise,.enterprise) .connection-tool{padding:20px 32px 24px}
:is(.story-enterprise,.enterprise) .connection-tool>.tool-intro{max-width:56ch;font-size:18px;line-height:1.6}
:is(.story-enterprise,.enterprise) .connection-board{grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);grid-template-rows:auto 44px auto;align-items:stretch;margin-top:30px;padding:0 0 30px}
:is(.story-enterprise,.enterprise) .connection-source{grid-column:1;grid-row:1;padding:24px;border:1px solid #dfd0be;border-radius:14px;background:#fffcf6;min-width:0;display:flex;flex-direction:column;min-height:300px}
:is(.story-enterprise,.enterprise) .connected-app-title{gap:12px;margin:0 0 24px}
:is(.story-enterprise,.enterprise) .connected-app-title>.app-symbol{width:40px;height:40px;background:#f0e5d6;border-radius:10px}
:is(.story-enterprise,.enterprise) .connected-app-title h4{font-size:20px;font-weight:500;line-height:1.3;letter-spacing:-.02em}
:is(.story-enterprise,.enterprise) .api-kind{font-size:16px;margin-top:4px;line-height:1.4}
:is(.story-enterprise,.enterprise) .source-receipt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px;row-gap:16px;align-content:start;align-items:start;border:0;border-radius:0;padding:0;background:none;box-shadow:none;flex:1}
:is(.story-enterprise,.enterprise) .source-receipt:after{display:none}
:is(.story-enterprise,.enterprise) .receipt-top{grid-column:1/-1;padding:0 0 18px;border-bottom:1px solid #e8ddce;justify-content:space-between;gap:12px}
:is(.story-enterprise,.enterprise) .receipt-top strong{font-size:24px;letter-spacing:-.02em;color:#5c3035}
:is(.story-enterprise,.enterprise) .receipt-top>span{padding:5px 10px;border-radius:6px;background:#e8efdf;color:#486043;font-size:16px;line-height:1.4}
:is(.story-enterprise,.enterprise) .source-receipt>p{grid-column:1;grid-row:2;font-size:18px;line-height:1.45;margin:0}
:is(.story-enterprise,.enterprise) .source-receipt>p>span{font-size:16px;margin-top:6px;line-height:1.4}
:is(.story-enterprise,.enterprise) .receipt-products{grid-column:2;grid-row:2/4;display:grid;grid-template-columns:1fr;gap:14px;margin:0}
:is(.story-enterprise,.enterprise) .receipt-products>div{display:flex;flex-direction:row;align-items:center;gap:8px}
:is(.story-enterprise,.enterprise) .receipt-products .product-visual{width:44px;border-radius:6px;background:#f4ebdd}
:is(.story-enterprise,.enterprise) .receipt-products>div>span:last-child{font-size:16px;line-height:1.4}
:is(.story-enterprise,.enterprise) .receipt-date{grid-column:1;grid-row:3;margin:0;padding:0;border:0;font-size:16px;line-height:1.45;max-width:10ch;color:#8b715e}
:is(.story-enterprise,.enterprise) .connection-core{grid-column:3;grid-row:1;display:flex;flex-direction:column;justify-content:center;padding:32px 28px;border-radius:14px;background:radial-gradient(ellipse at 18% 0,#873a4a,#641e31 70%,#501a2b);border:1px solid #8f4c5a;box-shadow:0 10px 24px #4e23300c;min-width:0;min-height:300px}
:is(.story-enterprise,.enterprise) .connection-core h4{font:400 42px/1.15 Georgia,serif;letter-spacing:-1.7px;color:#fff3e2}
:is(.story-enterprise,.enterprise) .client-workspace-caption{font-size:17px;line-height:1.5;margin-top:10px;color:#e9c6bc}
:is(.story-enterprise,.enterprise) .connection-core>p{font-size:18px;line-height:1.5;color:#fff1df;margin-top:24px}
:is(.story-enterprise,.enterprise) .hub-flow-state{font-size:16px;line-height:1.5;min-height:0;margin-top:24px;padding-top:20px;border-color:#b17a7b66;color:#e8c6b9}
:is(.story-enterprise,.enterprise) .route-in{grid-column:2;grid-row:1;align-self:center;height:1px;width:100%;justify-self:stretch}
:is(.story-enterprise,.enterprise) .route-in>b{left:50%;bottom:12px;transform:translateX(-50%);font-size:16px;color:#8b6d56}
:is(.story-enterprise,.enterprise) .route-out{grid-column:3;grid-row:2;width:1px;height:22px;align-self:start;justify-self:center}
:is(.story-enterprise,.enterprise) .route-out>b{left:14px;bottom:0;transform:none;font-size:16px;line-height:22px;color:#8b6d56}
:is(.story-enterprise,.enterprise) .route-out>span{transform:scaleY(0);transform-origin:top}
:is(.story-enterprise,.enterprise) .connection-board:not(.step-0) .route-out>span{transform:scaleY(1)}
:is(.story-enterprise,.enterprise) .route-out:after{left:-3px;right:auto;top:auto;bottom:0;width:7px;height:7px}
:is(.story-enterprise,.enterprise) .connection-destinations{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
:is(.story-enterprise,.enterprise) .connection-destinations:before{display:block;top:-22px;bottom:auto;left:calc((100% - 32px) / 6);right:calc((100% - 32px) / 6);width:auto;height:1px;background:#d3bfae}
:is(.story-enterprise,.enterprise) .connection-destination{display:grid;grid-template-columns:minmax(0,1fr) 24px;grid-template-rows:40px auto;gap:18px 10px;align-items:start;padding:22px;min-height:180px;border-radius:12px;border:1px solid #dfd0be;background:#f5eee3}
:is(.story-enterprise,.enterprise) .connection-destination:before{display:block;left:50%;top:-22px;width:1px;height:22px;background:#d3bfae}
:is(.story-enterprise,.enterprise) .connection-destination>.app-symbol{grid-column:1;grid-row:1;width:40px;height:40px;border-radius:10px;background:#e9dfcf;color:#805340;justify-self:start}
:is(.story-enterprise,.enterprise) .connection-destination>div{grid-column:1/-1;grid-row:2}
:is(.story-enterprise,.enterprise) .connection-destination h4{font-size:19px;line-height:1.35;letter-spacing:-.02em}
:is(.story-enterprise,.enterprise) .connection-destination p{font-size:16px;line-height:1.5;min-height:48px;margin-top:8px;color:#876d57}
:is(.story-enterprise,.enterprise) .connection-check{grid-column:2;grid-row:1;align-self:center;display:grid;place-items:center;width:24px;height:24px;border:1px solid #cebfac;border-radius:50%;color:#48673c;font-size:16px}
:is(.story-enterprise,.enterprise) .connection-destination.arrived{background:#edf0e4;border-color:#c7d0b4}
:is(.story-enterprise,.enterprise) .connection-destination.arrived>.app-symbol{background:#e0e7d4}
:is(.story-enterprise,.enterprise) .arrived .connection-check{background:#4e6b45;border-color:#4e6b45;color:#fff}
:is(.story-enterprise,.enterprise) .connection-action{padding-top:24px;gap:24px;align-items:center}
:is(.story-enterprise,.enterprise) .connection-action>p{font-size:17px;line-height:1.5;max-width:40ch}
:is(.story-enterprise,.enterprise) [data-run-connection]{padding:14px 20px;min-height:52px;border-radius:9px;font-size:17px}
:is(.story-enterprise,.enterprise) .connection-receipts{gap:16px;margin-top:24px}
:is(.story-enterprise,.enterprise) .connection-receipts>div{padding:22px}
:is(.story-enterprise,.enterprise) .api-exchange{margin-top:24px;padding-top:8px}
:is(.story-enterprise,.enterprise) .api-exchange>button{padding:14px 0;min-height:52px}
:is(.story-enterprise,.enterprise) .build-method{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"heading action" "steps steps";align-items:center;gap:26px 32px;margin-left:0;margin-top:36px;padding:28px 0 0;border-top:1px solid #343b46}
:is(.story-enterprise,.enterprise) .build-method h3{grid-area:heading;font:500 22px/1.3 Milano,Arial,sans-serif;letter-spacing:-.02em;color:#f0f3fa;margin:0}
:is(.story-enterprise,.enterprise) .build-method #build-method-steps{grid-area:steps;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;list-style:none;padding:0;margin:0;max-width:none}
:is(.story-enterprise,.enterprise) .build-method>.primary{grid-area:action;white-space:nowrap;align-self:center;margin:0}
@media(max-width:1200px) and (min-width:901px),(max-width:700px){
 :is(.story-enterprise,.enterprise) .connection-board{grid-template-columns:1fr;grid-template-rows:auto 42px auto 42px auto;gap:0}
 :is(.story-enterprise,.enterprise) .connection-source{grid-column:1;grid-row:1;min-height:0}
 :is(.story-enterprise,.enterprise) .route-in{grid-column:1;grid-row:2;height:42px;width:1px;justify-self:center;align-self:start}
 :is(.story-enterprise,.enterprise) .route-in>b{left:14px;bottom:10px;transform:none}
 :is(.story-enterprise,.enterprise) .route-in>span{transform:scaleY(0);transform-origin:top}
 :is(.story-enterprise,.enterprise) .connection-board:not(.step-0) .route-in>span{transform:scaleY(1)}
 :is(.story-enterprise,.enterprise) .route-in:after{left:-3px;right:auto;top:auto;bottom:0;width:7px;height:7px}
 :is(.story-enterprise,.enterprise) .connection-core{grid-column:1;grid-row:3;min-height:260px;padding:30px 24px}
 :is(.story-enterprise,.enterprise) .route-out{grid-column:1;grid-row:4;height:42px}
 :is(.story-enterprise,.enterprise) .route-out>b{bottom:10px}
 :is(.story-enterprise,.enterprise) .connection-destinations{grid-column:1;grid-row:5;grid-template-columns:1fr;gap:12px}
 :is(.story-enterprise,.enterprise) .connection-destinations:before,:is(.story-enterprise,.enterprise) .connection-destination:before{display:none}
 :is(.story-enterprise,.enterprise) .connection-destination{grid-template-columns:40px minmax(0,1fr) 24px;grid-template-rows:auto;gap:16px;align-items:center;min-height:108px;padding:20px}
 :is(.story-enterprise,.enterprise) .connection-destination>div{grid-column:2;grid-row:1}
 :is(.story-enterprise,.enterprise) .connection-check{grid-column:3}
 :is(.story-enterprise,.enterprise) .connection-destination p{min-height:0;margin-top:6px}
}
@media(max-width:800px){:is(.story-enterprise,.enterprise) .build-method{margin-left:0;grid-template-columns:1fr;grid-template-areas:"heading" "steps" "action";gap:24px}:is(.story-enterprise,.enterprise) .build-method>.primary{justify-self:start}}
@media(max-width:900px){:is(.story-enterprise,.enterprise) .build-method{margin-left:0}}
@media(max-width:600px){
 :is(.story-enterprise,.enterprise) .connection-tool{padding:18px 18px 20px}
 :is(.story-enterprise,.enterprise) .connection-tool>.tool-intro{font-size:17px;line-height:1.6}
 :is(.story-enterprise,.enterprise) .connection-board{margin-top:24px;padding-bottom:24px}
 :is(.story-enterprise,.enterprise) .connection-source{padding:20px}
 :is(.story-enterprise,.enterprise) .connected-app-title{margin-bottom:20px}
 :is(.story-enterprise,.enterprise) .source-receipt{column-gap:14px}
 :is(.story-enterprise,.enterprise) .receipt-products>div{align-items:start;flex-direction:column;gap:7px}
 :is(.story-enterprise,.enterprise) .receipt-products .product-visual{width:48px}
 :is(.story-enterprise,.enterprise) .connection-core h4{font-size:38px}
 :is(.story-enterprise,.enterprise) .connection-destination{padding:18px 16px;gap:12px;grid-template-columns:34px minmax(0,1fr) 22px}
 :is(.story-enterprise,.enterprise) .connection-destination>.app-symbol{width:34px;height:34px}
 :is(.story-enterprise,.enterprise) .connection-check{width:22px;height:22px}
 :is(.story-enterprise,.enterprise) .connection-action{align-items:stretch;gap:20px}
 :is(.story-enterprise,.enterprise) .connection-receipts>div{padding:18px}
 :is(.story-enterprise,.enterprise) .build-method{margin-top:28px;padding-top:26px;gap:24px}
 :is(.story-enterprise,.enterprise) .build-method #build-method-steps{gap:26px}
 :is(.story-enterprise,.enterprise) .build-method>.primary{width:100%;justify-content:center}
}
/* On phones the order reads top to bottom; no empty column beside its products. */
@media(max-width:600px){
 :is(.story-enterprise,.enterprise) .source-receipt{display:block}
 :is(.story-enterprise,.enterprise) .source-receipt>p{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px;margin-top:18px}
 :is(.story-enterprise,.enterprise) .source-receipt>p>span{margin:0}
 :is(.story-enterprise,.enterprise) .receipt-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(68px,1fr));gap:16px;margin-top:22px}
 :is(.story-enterprise,.enterprise) .receipt-products>div{align-items:start;flex-direction:column}
 :is(.story-enterprise,.enterprise) .receipt-date{margin-top:20px;padding-top:16px;border-top:1px solid #e8ddce;max-width:none}
}
@media(max-width:360px){
 :is(.story-enterprise,.enterprise) .receipt-products{grid-template-columns:1fr;gap:12px}
 :is(.story-enterprise,.enterprise) .receipt-products>div{flex-direction:row;align-items:center;gap:12px}
}

/* The practical three-step summary follows the selected brief. */
:is(.story-enterprise,.enterprise) .build-method-steps>li{display:block;min-width:0}
:is(.story-enterprise,.enterprise) .build-method .method-number{display:block;font:400 17px/1.4 Milano,Arial,sans-serif;color:#8edfd7;margin:0 0 14px}
:is(.story-enterprise,.enterprise) .build-method h4{font:500 20px/1.35 Milano,Arial,sans-serif;color:#f0f3fa;letter-spacing:-.015em;margin:0 0 10px}
:is(.story-enterprise,.enterprise) .build-method p{font:400 17px/1.65 Milano,Arial,sans-serif;color:#b9c6d9;margin:0}
@media(max-width:800px){:is(.story-enterprise,.enterprise) .build-method #build-method-steps{grid-template-columns:1fr;gap:26px}:is(.story-enterprise,.enterprise) .build-method-steps>li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:16px}:is(.story-enterprise,.enterprise) .build-method .method-number{margin:2px 0 0}}
