/* The six workflow panels share a grid cell, so changing tabs never shifts
   the page or the scroll-driven freight timeline. Original captures stay intact. */
#apps{position:relative}
.platform-heading{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:end;margin-bottom:40px}
.platform-heading h2{margin-bottom:0}
.platform-heading>div>p{max-width:430px;margin:0 0 22px;color:#b4b8ba;font-size:15px;line-height:1.85}
.platform-audiences{display:flex;gap:7px;flex-wrap:wrap}
.platform-audiences span{border:1px solid #ffffff20;border-radius:20px;padding:7px 10px;color:#d7dadb;font-size:10px}
.platform-explorer{display:grid;grid-template-columns:215px minmax(0,1fr);border:1px solid #ffffff22;border-radius:18px;background:#0d1013f7;overflow:hidden;box-shadow:0 14px 38px #0003}
.platform-tabs{background:#0b0e10;border-right:1px solid #ffffff17;padding:14px;display:flex;flex-direction:column;gap:5px}
.platform-tabs button{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:65px;border:1px solid transparent;border-radius:9px;padding:12px;color:#939da2;background:transparent;text-align:left;font:inherit;cursor:pointer;transition:background .16s,color .16s,border-color .16s}
.platform-tabs button>b{font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em;opacity:.55}
.platform-tabs button>span{font-size:12px;font-weight:600;line-height:1.5}
.platform-tabs button>i{font-style:normal;font-size:12px;margin-left:auto;opacity:0}
.platform-tabs button:hover{background:#ffffff06;color:#e9ecee}
.platform-tabs button[aria-selected=true]{background:#ffb21613;border-color:#ffb21639;color:#ffb216}
.platform-tabs button[aria-selected=true]>b,.platform-tabs button[aria-selected=true]>i{opacity:1}
.platform-tabs button:focus-visible,.platform-explorer a:focus-visible,.platform-start a:focus-visible{outline:2px solid #ffb216;outline-offset:3px}
.platform-workspaces{display:grid;min-width:0}
.platform-workspace,.platform-workspace[hidden]{grid-area:1/1;display:flex;flex-direction:column;padding:32px;min-width:0}
/* Override the site's global [hidden]{display:none!important} only here:
   each inactive panel keeps the same flex layout as the active panel, so the
   shared grid remains as tall as the longest content at every breakpoint. */
.platform-workspace[hidden]{display:flex!important;visibility:hidden;pointer-events:none}
.platform-workspace:focus-visible{outline:2px solid #ffb216;outline-offset:-4px}
.platform-eyebrow{display:block;font:9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:#b19e76;line-height:1.8}
.platform-panel-heading{padding-bottom:24px;border-bottom:1px solid #ffffff14}
.platform-panel-heading h3{font-size:clamp(24px,2.7vw,34px);font-weight:600;line-height:1.15;letter-spacing:-.045em;color:#f0f1ed;margin:12px 0 14px;max-width:580px}
.platform-panel-heading>p{font-size:13px;line-height:1.8;color:#a5aeb3;max-width:650px;margin:0}
.platform-features{display:grid;grid-template-columns:1fr 1fr;gap:24px 28px;margin:26px 0 30px}
.platform-features>div{min-width:0}
.platform-features dt{display:flex;align-items:center;gap:9px;color:#e3e7e9;font-size:12px;font-weight:650;line-height:1.55;margin-bottom:7px}
.platform-features dt>span{color:#6f777b;font:8px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
.platform-features dd{margin:0;padding-left:22px;font-size:11px;line-height:1.8;color:#919ca2}
.platform-panel-footer{display:flex;align-items:center;gap:25px;justify-content:space-between;border-top:1px solid #ffffff14;padding-top:20px;margin-top:auto}
.platform-panel-footer p{font-size:9px;line-height:1.8;max-width:360px;margin:0;color:#8d969c}
.platform-panel-footer>a{display:inline-flex;flex-shrink:0;gap:10px;align-items:center;color:#ffb216;font-size:10px;line-height:1.8;text-decoration:none;max-width:200px}
.platform-panel-footer>a>span{font-size:15px}
.platform-apps-heading{display:flex;gap:20px;justify-content:space-between;align-items:center;margin-top:65px;padding-top:25px;border-top:1px solid #ffffff24}
.platform-apps-heading>p{margin:0}
.platform-apps-heading>span{font-size:10px;color:#828d94}
#apps .app-directory{margin:27px 0 45px;gap:35px}
#apps .app-directory article{min-width:0}
#apps .app-directory p{min-height:94px;font-size:12px;line-height:1.8}
#apps .app-directory a{font-size:11px;margin-top:14px;display:block;width:fit-content;line-height:1.8}
#apps .app-directory .platform-secondary-link{color:#a9b0b4;font-size:10px;margin-top:8px}
#apps .app-directory small{display:block;font-size:10px;line-height:1.8;color:#818d95;max-width:290px;margin-top:13px}
.platform-start{display:grid;grid-template-columns:.8fr 1.2fr;gap:55px;border:1px solid #ffb21626;border-radius:15px;padding:37px;background:linear-gradient(115deg,#1b1912f5,#101316f5 60%)}
.platform-start-heading>p{margin:0 0 15px}
.platform-start h3{font-size:clamp(25px,3vw,37px);letter-spacing:-.055em;font-weight:600;line-height:1.16;color:#e6e8e5;margin:0 0 22px}
.platform-start h3 em{color:#ffb216;font-style:normal}
.platform-start-heading>a{display:inline-flex;align-items:center;gap:20px;color:#ffb216;font-size:11px;text-decoration:none;line-height:1.8}
.platform-start ol{list-style:none;padding:0;margin:0;display:grid;gap:23px}
.platform-start li{display:flex;gap:20px;min-width:0}
.platform-start li>span{display:flex;flex-shrink:0;align-items:center;justify-content:center;align-self:start;width:29px;height:29px;border:1px solid #ffb2163d;border-radius:50%;font:9px ui-monospace,SFMono-Regular,Menlo,monospace;color:#ffb216}
.platform-start h4{font-size:13px;font-weight:600;line-height:1.6;color:#e0e4e4;margin:2px 0 7px}
.platform-start li p{font-size:11px;line-height:1.8;color:#a3adb3;margin:0;max-width:470px}
#apps .automation-strip{margin-top:40px}
.platform-connections{display:grid;grid-template-columns:1fr 1.75fr;gap:25px 50px;border-top:1px solid #ffffff1f;padding-top:33px}
.platform-connections .platform-eyebrow{margin:0 0 11px}
.platform-connections h3{color:#e5e8e7;font-size:24px;line-height:1.2;font-weight:500;letter-spacing:-.04em;margin:0}
.platform-connections dl{display:grid;grid-template-columns:1fr 1.1fr 1.5fr;gap:17px;align-self:center;margin:0}
.platform-connections dt{font:9px ui-monospace,SFMono-Regular,Menlo,monospace;color:#717e86;margin-bottom:12px;text-transform:uppercase;letter-spacing:.12em}
.platform-connections dd{font-size:12px;line-height:1.9;color:#d6dcdf;margin:0}
.platform-connections>p{grid-column:2;font-size:9px;line-height:1.8;color:#7e8b93;margin:0}
@media(min-width:1400px){.platform-explorer{grid-template-columns:235px minmax(0,1fr)}.platform-workspace,.platform-workspace[hidden]{padding:40px}.platform-features{gap:28px 35px}.platform-features dt{font-size:13px}.platform-features dd{font-size:12px}.platform-tabs button>span{font-size:13px}}
@media(max-width:1050px){.platform-heading{gap:35px}.platform-explorer{grid-template-columns:190px minmax(0,1fr)}.platform-tabs{padding:9px}.platform-tabs button{gap:8px;padding:9px}.platform-tabs button>span{font-size:11px}.platform-workspace,.platform-workspace[hidden]{padding:25px}.platform-panel-footer{display:block}.platform-panel-footer p{max-width:100%;margin-bottom:14px}.platform-panel-footer>a{max-width:none}.platform-features{gap:21px}.platform-start{gap:35px;padding:29px}.platform-connections{grid-template-columns:.8fr 1.5fr;gap:20px 25px}.platform-connections dl{gap:13px}.platform-connections dd{font-size:10px}}
@media(max-width:760px){.platform-heading{display:block;margin-bottom:28px}.platform-heading h2{margin-bottom:24px}.platform-heading>div>p{font-size:14px;max-width:530px;line-height:1.8;margin-bottom:17px}.platform-audiences span{font-size:9px;padding:6px 9px}.platform-explorer{display:block;border-radius:13px}.platform-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:9px;border-right:0;border-bottom:1px solid #ffffff17;gap:4px}.platform-tabs button{display:block;min-height:66px;padding:9px 6px;text-align:center;border-radius:7px}.platform-tabs button>b{font-size:8px;display:block;margin-bottom:5px}.platform-tabs button>span{display:block;font-size:10px;line-height:1.35}.platform-tabs button>i{display:none}.platform-panel-heading h3{font-size:29px}.platform-features{gap:23px 22px}.platform-apps-heading{margin-top:43px}.platform-apps-heading>span{display:none}#apps .app-directory{gap:26px}#apps .app-directory p{min-height:110px;font-size:11px}#apps .app-directory small{font-size:9px}.platform-start{grid-template-columns:1fr;gap:28px}.platform-start h3{font-size:31px}.platform-start ol{gap:21px}.platform-connections{grid-template-columns:1fr;gap:26px}.platform-connections dl{gap:22px}.platform-connections dd{font-size:11px}.platform-connections>p{grid-column:1}}
@media(max-width:600px){.platform-workspace,.platform-workspace[hidden]{padding:23px 20px}.platform-panel-heading{padding-bottom:22px}.platform-panel-heading h3{font-size:28px;max-width:330px}.platform-panel-heading>p{font-size:12px;line-height:1.85}.platform-features{grid-template-columns:1fr;gap:20px;margin:22px 0 25px}.platform-features dt{font-size:12px;margin-bottom:5px}.platform-features dd{font-size:11px;line-height:1.8}.platform-panel-footer{padding-top:18px}.platform-panel-footer p{font-size:9px}.platform-panel-footer>a{font-size:10px}.platform-apps-heading{padding-top:20px}#apps .app-directory{margin:26px 0 35px;gap:28px}#apps .app-directory article{border-bottom:1px solid #ffffff15;padding-bottom:26px}#apps .app-directory article:last-child{border:0;padding-bottom:0}#apps .app-directory h3{font-size:27px;margin:12px 0}#apps .app-directory p{font-size:12px;min-height:0;max-width:360px}#apps .app-directory a{font-size:12px}#apps .app-directory .platform-secondary-link{font-size:11px}#apps .app-directory small{font-size:10px;margin-top:10px;max-width:none}.platform-start{padding:25px 21px;border-radius:12px}.platform-start h3{font-size:30px}.platform-start li{gap:14px}.platform-start li p{font-size:11px;line-height:1.85}.platform-start h4{font-size:12px}.platform-connections dl{grid-template-columns:1fr;gap:16px}.platform-connections dl>div{display:grid;grid-template-columns:90px 1fr;gap:15px;border-bottom:1px solid #ffffff12;padding-bottom:16px}.platform-connections dt{margin:4px 0 0;font-size:8px}.platform-connections dd{font-size:12px}.platform-connections h3{font-size:26px}.platform-connections>p{font-size:9px}.platform-eyebrow{font-size:8px;letter-spacing:.11em}}
@media(prefers-reduced-motion:reduce){.platform-tabs button{transition:none}}


/* The MCP connection is a product benefit in the hero and platform overview. */
.hero-mcp{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:380px;margin:21px 0 0;padding:11px 13px;border-left:2px solid #ffb216;background:#10161cdb;text-decoration:none;color:#f0f2f3}
.hero-mcp strong{display:block;font-size:13px;font-weight:600;line-height:1.5}
.hero-mcp small{display:block;font-size:10px;line-height:1.7;color:#b9a374;margin-top:3px}
.hero-mcp>span:last-child{font-size:19px;color:#ffb216}
.hero-mcp:hover{background:#1d211fea;border-color:#ffd079}
.hero-mcp:focus-visible,.mcp-feature a:focus-visible{outline:2px solid #ffb216;outline-offset:5px}
.mcp-feature{display:grid;grid-template-columns:1.05fr 1fr;gap:34px 64px;position:relative;margin:0 0 42px;padding:42px;border:1px solid #bb8b354d;border-radius:18px;background:linear-gradient(120deg,#191a17fa,#0c1116fa 63%);scroll-margin-top:20px}
.mcp-feature .platform-eyebrow{margin:0 0 20px;color:#d2b678}
.mcp-feature h3{margin:0 0 23px;font-size:clamp(34px,3.7vw,53px);font-weight:500;line-height:1.08;letter-spacing:-.055em;color:#eff1f2}
.mcp-feature h3 em{color:#ffb216;font-style:normal}
.mcp-feature-copy>p:not(.platform-eyebrow){font-size:14px;line-height:1.9;color:#b6bec3;max-width:450px;margin:0 0 24px}
.mcp-feature .quiet-link{font-size:12px;color:#f1c463}
.mcp-assistants{display:flex;align-items:center;gap:13px;margin-bottom:31px;font-size:19px;color:#edf0f2;font-weight:600;flex-wrap:wrap}
.mcp-assistants b{font-weight:400;font-size:14px;color:#77838b}
.mcp-assistants i{margin-left:auto;font:9px/1.2 monospace;letter-spacing:.09em;color:#ffc457;border:1px solid #a780385c;border-radius:5px;padding:6px 8px}
.mcp-feature-questions>.platform-eyebrow{font-size:8px;color:#929fa9;margin-bottom:4px}
.mcp-feature ul{list-style:none;padding:0;margin:0}
.mcp-feature li{display:flex;gap:17px;padding:17px 0;border-bottom:1px solid #ffffff15;color:#dce1e4;font-size:13px;line-height:1.7}
.mcp-feature li span{font:9px/2.4 monospace;color:#aa8c55}
.mcp-recording{font-size:11px;line-height:1.85;color:#99a5ae;margin:23px 0 0}
.mcp-recording strong{display:block;color:#d4dbdf;font-weight:500;margin-bottom:5px}
.mcp-availability{grid-column:1 / -1;margin:0;padding-top:20px;border-top:1px solid #ffffff13;font-size:10px;line-height:1.8;color:#909da5}
@media(max-width:900px){.mcp-feature{gap:28px;padding:30px}.mcp-feature-copy>p:not(.platform-eyebrow){font-size:12px}.hero-mcp strong{font-size:12px}}
@media(max-width:600px){.hero-mcp{max-width:345px}.mcp-feature{grid-template-columns:1fr;gap:30px;padding:26px 22px;border-radius:13px}.mcp-feature h3{font-size:39px}.mcp-feature .platform-eyebrow{font-size:8px}.mcp-feature-copy>p:not(.platform-eyebrow){font-size:13px}.mcp-assistants{font-size:20px}.mcp-feature li{font-size:12px}.mcp-availability{font-size:9px}.mcp-feature .quiet-link{min-height:44px}}

/* Original assistant marks, with a lightweight visual connection to HaulBook. */
.hero-mcp { gap:12px; padding:11px 12px; }
.hero-ai-marks { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.hero-ai-marks img { display:block; object-fit:contain; }
.hero-ai-copy { flex:1; min-width:0; }
.hero-mcp .hero-ai-copy strong { font-size:12px; line-height:1.5; }
.hero-mcp .hero-ai-copy small { font-size:10px; }
.mcp-brand-bridge { margin:0 0 29px; }
.mcp-source { display:flex; align-items:center; gap:10px; width:fit-content; min-width:196px; margin:0 auto; padding:12px 15px; border:1px solid #bd913855; border-radius:11px; background:linear-gradient(125deg,#332b1c,#161b20); box-shadow:0 7px 24px #0003; color:#f1f2f0; font-size:16px; font-weight:600; }
.mcp-source img { flex:0 0 auto; object-fit:contain; }
.mcp-source small { display:block; margin-top:4px; color:#baa678; font:8px/1.4 monospace; letter-spacing:.13em; }
.mcp-source i { margin-left:auto; padding-left:17px; color:#ffc457; font:9px/1.2 monospace; font-style:normal; }
.mcp-brand-bridge .mcp-connector { display:block; width:100%; height:44px; fill:none; stroke:#665535; stroke-width:1; overflow:visible; }
.mcp-connector-flow { stroke:#ffbc38; stroke-dasharray:3 90; opacity:0; }
.mcp-brand-bridge:hover .mcp-connector-flow,.mcp-brand-bridge:focus-within .mcp-connector-flow { opacity:1; animation:mcp-flow 2.5s linear infinite; }
.mcp-brand-bridge .mcp-assistants { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:14px; margin:0; }
.mcp-brand-bridge .assistant-brand { display:flex; align-items:center; min-width:0; gap:9px; padding:17px 12px; border:1px solid #ffffff29; border-radius:12px; background:linear-gradient(130deg,#252a2ff2,#11161df5); color:#f5f3ef; text-decoration:none; box-shadow:0 8px 23px #0002; transition:border-color .2s,background .2s; }
.mcp-brand-bridge .assistant-brand:hover { border-color:#ffbe5370; background:linear-gradient(130deg,#33302a,#181e24); }
.assistant-brand>img { display:block; object-fit:contain; flex:0 0 40px; width:40px; height:40px; }
.assistant-brand:last-child>img { box-sizing:border-box; width:48px; height:48px; flex-basis:48px; padding:4px; }
.assistant-brand:first-child>img { width:48px; height:48px; flex-basis:48px; margin-inline:-4px; }
.assistant-brand>span { min-width:0; font-size:16px; font-weight:500; letter-spacing:-.025em; }
.assistant-brand small { display:block; font-size:9px; font-weight:400; line-height:1.5; letter-spacing:0; color:#a2abb3; margin-top:4px; }
.assistant-brand .assistant-arrow { font-size:12px; margin-left:auto; color:#a3a8ab; }
@keyframes mcp-flow { to { stroke-dashoffset:-186; } }
@media(max-width:1150px) and (min-width:601px) { .mcp-brand-bridge .mcp-assistants { gap:9px; } .mcp-brand-bridge .assistant-brand { flex-direction:column; text-align:center; padding:16px 7px; } .assistant-brand .assistant-arrow { display:none; } }
@media(max-width:600px) { .hero-ai-marks { gap:4px; } .hero-ai-marks img:first-child { width:30px; height:30px; } .hero-ai-marks img:last-child { width:25px; height:25px; } .mcp-brand-bridge .mcp-assistants { gap:10px; } .mcp-brand-bridge .assistant-brand { flex-direction:column; text-align:center; padding:17px 6px; } .assistant-brand .assistant-arrow { display:none; } .assistant-brand small { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { .mcp-connector-flow { animation:none !important; } .assistant-brand { transition:none; } }