/* Same brand foundations, three different operations and compositions. */
.ft-scene {--ft-p:1;--ft-middle:1;--ft-end:1;color:#171717;}
.ft-scene * {box-sizing:border-box;}
.ft-meta {display:block;font:400 13px/1.4 Onest,Arial,sans-serif;color:#656565;}
.pf-section .ft-scene h3 {font-size:30px;line-height:1.2;letter-spacing:-.025em;font-weight:400;margin:0;}
.pf-section .ft-scene h4 {font-size:21px;line-height:1.3;letter-spacing:-.015em;font-weight:400;margin:8px 0 12px;}
.ft-scene svg {display:block;flex:none;width:24px;height:24px;color:#ff5a2b;}
.ft-scene p {font-size:16px;line-height:1.6;margin:0;}
.ft-phases {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #d6d6d6;border-bottom:1px solid #d6d6d6;margin-bottom:28px;}
.ft-phases button {font:400 16px/1.4 Onest,Arial,sans-serif;display:flex;gap:16px;align-items:center;min-height:60px;padding:12px 18px;background:#fff;border:0;border-bottom:2px solid transparent;text-align:left;cursor:pointer;}
.ft-phases button small {font-size:12px;color:#656565;}
.ft-phases button[aria-pressed=true] {border-bottom-color:#ff5a2b;background:#f5f5f5;}
.ft-fields {margin:24px 0 0;}
.ft-fields>div {display:grid;grid-template-columns:1fr 1.5fr;gap:20px;border-top:1px solid #d6d6d6;padding:16px 0;font-size:15px;line-height:1.5;}
.ft-fields dt {color:#656565;}
.ft-fields dd {margin:0;}
.pf-section .ft-scene .ft-note {font-size:13px;line-height:1.5;color:#656565;margin:18px 0 0;max-width:95ch;}
.ft-action,.ft-message button {display:flex;gap:20px;align-items:center;justify-content:space-between;background:#ff5a2b;color:#171717;border:0;border-radius:8px;padding:16px 20px;min-height:52px;font:400 16px/1.4 Onest,Arial,sans-serif;cursor:pointer;text-align:left;}
.ft-action svg,.ft-message button svg {color:inherit;}
.ft-scene button:focus-visible {outline:2px solid #ff5a2b;outline-offset:4px;}
.ft-resume {display:flex;justify-content:flex-end;min-height:44px;margin-top:12px;}
.ft-resume button {min-height:44px;padding:10px 14px;font:400 14px/1.4 Onest,Arial,sans-serif;border:0;border-bottom:1px solid #d6d6d6;background:#fff;color:#171717;cursor:pointer;}
.ft-resume button:disabled {color:#656565;cursor:default;}
.ft-return-grid {display:grid;grid-template-columns:.8fr 1.2fr;gap:32px;}
.ft-history {background:#32131d;color:#fff;padding:32px;border-radius:8px;}
.ft-history .ft-meta,.ft-history dt {color:#c4b8bd;}
.pf-section .ft-history h3 {font-size:36px;margin:20px 0 32px;}
.ft-history .ft-fields>div {border-color:#806b73;}
.ft-history-link {display:flex;gap:20px;align-items:center;border-top:1px solid #806b73;margin-top:30px;padding-top:24px;font-size:16px;line-height:1.5;}
.ft-history-link svg {width:32px;height:32px;transform:rotate(calc(-40deg * (1 - var(--ft-p))));}
.ft-return-output {display:flex;flex-direction:column;gap:20px;}
.ft-reason {display:flex;gap:20px;align-items:center;border-top:1px solid #d6d6d6;padding:18px 0;}
.pf-section .ft-reason h4 {margin:7px 0 0;}
.ft-message {background:#f5f5f5;border:1px solid #d6d6d6;padding:28px;border-radius:8px;transform:translateX(calc(-16px * (1 - var(--ft-middle))));}
.ft-message>div {display:flex;gap:12px;align-items:center;margin-bottom:24px;}
.ft-message p {color:#656565;margin:18px 0 24px;}
.ft-message button {width:100%;}
.ft-return-receipt {display:flex;gap:20px;border-top:1px solid #d6d6d6;padding-top:18px;transform:translateY(calc(8px * (1 - var(--ft-end))));}
.ft-return-receipt svg {transform:scale(calc(.35 + .65 * var(--ft-end)));}
.ft-return-receipt p {margin:8px 0 0;}
.ft-crm-grid {display:grid;grid-template-columns:1fr 1fr;gap:48px;background:#171717;color:#fff;border-radius:8px;padding:32px;}
.ft-crm-grid .ft-meta,.ft-crm-grid dt {color:#a3a3a3;}
.ft-crm-grid .ft-fields>div {border-color:#656565;}
.ft-request-title {display:flex;gap:20px;align-items:center;margin-top:24px;}
.ft-request-title svg {width:32px;height:32px;}
.ft-rule {border-top:1px solid #656565;padding-top:24px;margin-top:30px;}
.ft-rule p {margin-top:12px;color:#a3a3a3;}
.ft-crm-output {position:relative;}
.ft-task-connection {position:absolute;left:-40px;top:46px;width:28px;color:#ff5a2b;}
.ft-task-connection i {display:block;height:2px;background:#ff5a2b;width:100%;transform:scaleX(var(--ft-middle));transform-origin:left;}
.ft-task-connection span {position:absolute;right:0;top:-13px;}
.ft-task {background:#32131d;padding:28px;border:1px solid #806b73;border-radius:8px;transform:translateY(calc(16px * (1 - var(--ft-middle))));}
.pf-section .ft-task h3 {margin:20px 0;}
.ft-task-check {display:flex;gap:12px;align-items:center;border-top:1px solid #806b73;padding-top:18px;font-size:14px;line-height:1.5;}
.ft-task-check svg {transform:scale(calc(.35 + .65 * var(--ft-end)));}
.ft-crm-output>.ft-action {width:100%;margin-top:20px;}
.pf-section .ft-task-status {font-size:14px;line-height:1.5;min-height:42px;color:#a3a3a3;margin-top:14px;}
.ft-analytics-grid {display:grid;grid-template-columns:1.1fr .9fr;gap:48px;}
.ft-observation {background:#f5f5f5;padding:32px;border-radius:8px;}
.ft-path {display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:16px;margin:24px 0;}
.ft-path i {font-style:normal;color:#ff5a2b;}
.ft-friction {border-bottom:2px solid #ff5a2b;padding-bottom:6px;}
.ft-checkout {background:#fff;border:1px solid #d6d6d6;border-radius:8px;padding:28px;}
.ft-observed-label {display:flex;gap:12px;align-items:center;font-size:13px;line-height:1.5;color:#656565;margin-bottom:24px;}
.ft-delivery {position:relative;border-top:1px solid #d6d6d6;border-bottom:1px solid #d6d6d6;margin:24px 0;padding:18px 0;font-size:14px;line-height:1.5;}
.ft-delivery>span:first-child {color:#656565;display:block;}
.ft-delivery strong {font-weight:400;font-size:18px;display:block;margin-top:8px;}
.ft-observation-ring {position:absolute;inset:-5px -12px;border:2px solid #ff5a2b;border-radius:8px;transform:scale(calc(.95 + .05 * var(--ft-middle)));}
.ft-input-example {padding:14px 16px;border:1px solid #d6d6d6;border-radius:8px;color:#656565;margin:12px 0;font-size:14px;}
.ft-next-example {display:flex;gap:16px;justify-content:space-between;background:#171717;color:#fff;border-radius:8px;padding:16px;font-size:15px;margin-top:18px;}
.ft-reasoning>ol {list-style:none;margin:24px 0;padding:0;}
.ft-reasoning li {padding:18px 0;border-top:1px solid #d6d6d6;}
.ft-reasoning li>p {font-size:15px;color:#656565;}
.ft-hypothesis {transform:translateX(calc(-8px * (1 - var(--ft-middle))));}
.ft-test {border-color:#ff5a2b!important;transform:translateY(calc(8px * (1 - var(--ft-end))));}
.ft-reasoning>.ft-action {width:100%;}
.pf-section .ft-test-status {font-size:14px;line-height:1.5;min-height:42px;margin-top:14px;color:#656565;}
.ft-manual .ft-message,.ft-manual .ft-return-receipt,.ft-manual .ft-task,.ft-manual .ft-hypothesis,.ft-manual .ft-test,.ft-manual .ft-task-check svg {transition:transform 450ms ease;}
@media(max-width:1000px) {
 .ft-return-grid,.ft-crm-grid,.ft-analytics-grid {grid-template-columns:1fr;gap:28px;}
 .ft-task-connection {display:none;}
 .ft-message {transform:translateY(calc(12px * (1 - var(--ft-middle))));}
 .ft-hypothesis,.ft-test {transform:none;}
}
@media(max-width:600px) {
 .ft-phases {margin-bottom:24px;}
 .ft-phases button {padding:12px 8px;gap:6px;flex-direction:column;align-items:flex-start;font-size:13px;min-height:64px;overflow-wrap:anywhere;}
 .ft-history,.ft-crm-grid,.ft-observation {padding:22px;}
 .ft-message,.ft-task,.ft-checkout {padding:20px;}
 .pf-section .ft-scene h3 {font-size:28px;}
 .pf-section .ft-history h3 {font-size:32px;}
 .pf-section .ft-scene h4 {font-size:20px;}
 .ft-fields>div {grid-template-columns:1fr;gap:6px;padding:14px 0;}
 .ft-return-output {gap:18px;}
 .ft-path {font-size:14px;gap:8px;}
 .ft-observed-label {align-items:flex-start;}
 .ft-delivery strong {font-size:17px;}
 .ft-action,.ft-message button {font-size:15px;padding:14px;}
}
@media(prefers-reduced-motion:reduce) {.ft-scene * {transition:none!important;}}
.ft-reduced * {transition:none!important;}

.ft-reason {min-height:94px;}
.ft-return-receipt {border-top-color:color-mix(in srgb,#d6d6d6 calc((1 - var(--ft-end))*100%),#ff5a2b);}
.ft-task {border-color:color-mix(in srgb,#806b73 calc((1 - var(--ft-end))*100%),#ff5a2b);}
