/* The PNG artwork stays intact; these frames fit each logo variant to its surface. */
.direction-logo{display:inline-block;position:relative;overflow:hidden;width:210px;aspect-ratio:7.15;flex-shrink:0;vertical-align:middle;mix-blend-mode:multiply}
.direction-logo>img{display:block;position:absolute;width:119.1%!important;max-width:none!important;height:auto!important;left:-8.12%;top:-117.3%;margin:0!important;object-fit:contain}
.direction-lockup{display:block;position:relative;overflow:hidden;width:360px;max-width:100%;aspect-ratio:4.8;background:white}
.direction-lockup>img{display:block;position:absolute;width:119%!important;max-width:none!important;height:auto!important;left:-8.1%;top:-77%;margin:0!important}
.reference-brand{min-width:0;letter-spacing:normal}
.reference-design .reference-brand .direction-logo{width:clamp(130px,12vw,170px);height:auto}
.reference-design .direction-footer-brand{background:transparent;padding:0;max-width:100%}
.reference-design .footer{gap:24px;flex-wrap:wrap}
.reference-design .footer .direction-lockup{width:360px;background:transparent;aspect-ratio:4.57}
.reference-design .footer .direction-lockup>img{width:109%!important;left:-3.45%;top:-38%}
.login-design .brand .direction-logo{width:270px;max-width:100%}
.login-design .orbit-center{background:white;box-shadow:0 12px 32px #00859b20;padding:10px}
.login-design .orbit-center img{width:100%;height:100%}
.login-design .login-form:before{content:none!important}
.workspace-brand{width:150px}
.composer-brand{width:170px}
.rail-brand img{width:40px;height:40px;border-radius:10px}
.welcome-deck header .direction-logo{width:210px}
/* Teal from the new wordmark, with a darker shade for readable button text. */
.reference-design .blue-button,.reference-design .green-button,.reference-design .btn,.login-design .email-submit,.login-design .provider-email{background:#007f98;border-color:#007f98;color:white}
.reference-design .blue-button:hover,.reference-design .green-button:hover,.login-design .email-submit:hover,.login-design .provider-email:hover{background:#006a80}
.reference-design .reference-hero,.reference-design .section-dark,.reference-design .closing{background:linear-gradient(130deg,#031827,#073646 65%,#006276)}
.reference-design .footer{background:#031827}
.reference-design .principle{background:linear-gradient(145deg,#fafdfd,#edf8fa);border-color:#d1e7eb}
.reference-design .principle::before{background:linear-gradient(90deg,#009bb5,#007f98)}
.reference-design .principle>.principle-icon{background:linear-gradient(135deg,#009bb5,#006f85);box-shadow:0 6px 16px #007f981c}
.reference-design .bottom-cta{background:linear-gradient(110deg,#007f98,#00516a 75%,#073646)}
.reference-design .tour-tab[aria-selected=true]{color:#00758b;border-color:#009bb5}
.reference-design .tour-tab[aria-selected=true]::after{background:#009bb5}
.reference-design .feature-overlay{background:linear-gradient(135deg,#009bb5,#63c4c7)}
.reference-design .feature-workspace>aside{background:linear-gradient(#007f98,#05475c)}
.login-design .login-story{background:radial-gradient(ellipse at 35% 80%,#dcf2f4 0,transparent 55%),#f5f8fb}
.login-design .login-story h2 em{color:#007f98}
.login-design .email-panel{background:#f0f9fa;border-color:#cce4e8}
.login-design .orbit-ring,.login-design .orbit-ring.second{border-color:#b5dce2}
.compass-rail{background:#007f98}
:root{--primary:190 100% 30%;--ring:190 100% 30%}
nav button[aria-current="page"]{color:#00758b!important;background:#e4f3f5!important}
@media(max-width:1000px){.reference-nav{gap:18px}.reference-links{gap:18px}.reference-actions{gap:16px}.reference-design .reference-brand .direction-logo{width:140px}}
@media(max-width:600px){.reference-design .reference-brand .direction-logo{width:120px}.reference-actions{gap:12px}.reference-actions .blue-button{padding:12px 14px}.workspace-brand{width:112px}.composer-brand{width:140px}.login-design .brand .direction-logo{width:220px}.reference-design .footer .direction-lockup{width:300px}}

.reference-design .strategy-pill{background:linear-gradient(100deg,#06445a,#096477);border-color:#ffffff26}.reference-design .strategy-pill span{color:#d0edf1}.reference-design .mock-app aside{background:linear-gradient(#007f98,#05475c)}

.reference-design .closing .btn{background:#007f98;border-color:#007f98}
.reference-design .closing .btn:hover{background:#006a80}
.login-mobile-brand{display:none}
@media(max-width:600px){.login-mobile-brand{display:block;margin-bottom:28px}.login-mobile-brand .direction-logo{width:220px}.login-design .login-form>.eyebrow{display:none}}
.home-greeting h2{background:none;color:#007f98}
.home-new-task,.legacy-scope button.primary,.brain-question button{background:#007f98;color:white;border-color:#007f98}
.rail-create span{background:#d8f0f3;color:#006c82}

/* Layered project illustration: every card belongs to the same work. */
.reference-design .reference-hero{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:48px;min-height:0;padding-top:64px;padding-bottom:72px}
.reference-design .reference-copy h1{margin-top:0;font-size:clamp(44px,4.7vw,88px)}
.reference-design .reference-copy>p{max-width:480px;font-size:clamp(20px,1.5vw,28px);line-height:1.5;color:#d5e9ed}
.reference-design .reference-ctas{flex-wrap:wrap;gap:12px;margin-top:30px}
.reference-design .reference-ctas>a{font-size:16px;padding:16px 20px}
.reference-design .reference-ctas .blue-button{background:transparent;border:1px solid #8ab8c2}
.hero-workflow{position:relative;min-width:0;font-size:16px;line-height:1.5;isolation:isolate}
.workflow-context{display:flex;justify-content:space-between;gap:16px;margin:0 12px 16px;color:#c4e2e8;font-size:16px}
.workflow-background{display:flex;justify-content:space-between;gap:24px;margin:0 0 -18px;padding:20px 24px 38px;border:1px solid #80c2cd55;border-radius:18px;background:linear-gradient(130deg,#ffffff0c,#38b5c422);color:#d2eef2;transform:rotate(-2deg)}
.workflow-deadline{display:flex;flex-direction:column;gap:2px}.workflow-deadline strong{font-size:20px;color:#fff;font-weight:600}
.workflow-progress{min-width:180px;align-self:center}
.workflow-progress-track{height:7px;margin-top:10px;background:#ffffff22;border-radius:20px;overflow:hidden}.workflow-progress-track i{display:block;width:33.333%;height:100%;background:#69d5cf;border-radius:20px}
.workflow-tracker{position:relative;margin-left:24px;background:#f9fcfd;color:#132f3c;border:1px solid #cce3e7;border-radius:16px;padding-bottom:30px;box-shadow:0 16px 40px #00121e38;overflow:hidden}
.workflow-tracker header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:18px 20px;border-bottom:1px solid #dce9ed;background:#edf7f9}
.workflow-tracker h2{font-size:22px;line-height:1.3;margin:0;color:#132f3c;letter-spacing:-.025em}
.workflow-tracker header>span{margin-left:auto;color:#476570;font-size:16px}
.workflow-task-head,.workflow-task{display:grid;grid-template-columns:minmax(0,1fr) 56px 108px;gap:12px;align-items:center;padding:13px 20px}
.workflow-task-head{color:#526d77;font-weight:600;border-bottom:1px solid #e2ecef}
.workflow-task{border-bottom:1px solid #e2ecef}.workflow-task:last-child{border-bottom:0}
.workflow-task strong{font-weight:600}.workflow-task.is-selected{background:#e6f4f7;box-shadow:inset 4px 0 #009bb5}.workflow-owner{color:#476570}
.workflow-status{display:inline-block;justify-self:start;padding:3px 7px;border-radius:6px;font-size:16px;white-space:nowrap}
.workflow-status.is-complete{color:#236345;background:#e0f0e7}.workflow-status.is-progress{color:#00677b;background:#d0ebf0}.workflow-status.is-pending{color:#4f6070;background:#e9edf2}
.workflow-update,.workflow-feedback{position:relative;border-radius:16px;padding:18px 22px;background:white;color:#132f3c;box-shadow:0 14px 36px #00121e33;border:1px solid #cce3e7}
.workflow-update{width:83%;margin-top:-22px;z-index:1}
.workflow-feedback{width:86%;margin:16px 0 0 auto;background:#eaf8f8;border-top:3px solid #41b8ba}
.workflow-feedback::before{content:"";position:absolute;left:-24px;top:-18px;width:20px;height:44px;border-left:2px solid #79bdc9;border-bottom:2px solid #79bdc9;border-bottom-left-radius:12px;z-index:-1}
.workflow-card-heading{display:flex;gap:10px;align-items:center}
.workflow-avatar{width:36px;height:36px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:#e8e8f5;color:#514b79;font-weight:600;font-size:16px}
.workflow-feedback .workflow-avatar{background:#cdebed;color:#00677b}
.workflow-card-heading h3{margin:0;font-size:17px;line-height:1.4;color:#132f3c;letter-spacing:0}
.workflow-card-heading div>span{font-size:16px;color:#526d77}
.workflow-card-heading svg{width:24px;height:24px;margin-left:auto;color:#00899f;flex-shrink:0}
.workflow-update p,.workflow-feedback p{margin:12px 0 0;font-size:17px;line-height:1.5;color:#395561}
@media(min-width:1600px){.hero-workflow{max-width:760px;justify-self:center;width:100%}.reference-design .reference-hero{gap:64px;padding-top:88px;padding-bottom:88px}}
@media(max-width:1100px){.reference-design .reference-hero{grid-template-columns:1fr;gap:40px}.reference-design .reference-copy h1{font-size:clamp(44px,7vw,72px)}.reference-design .reference-copy>p{max-width:640px}.hero-workflow{width:100%;max-width:760px;justify-self:center}}
@media(max-width:600px){.reference-design .reference-hero{padding:40px 20px 48px;gap:36px}.reference-design .reference-ctas>a{white-space:normal}.workflow-context{margin-left:0;margin-right:0}.workflow-background{padding:18px 16px 36px;gap:12px}.workflow-progress{min-width:0;max-width:130px}.workflow-deadline strong{font-size:18px}.workflow-tracker{margin-left:10px}.workflow-tracker header{padding:16px}.workflow-tracker header>span{margin-left:38px;margin-top:-6px;flex-basis:100%}.workflow-task-head{display:none}.workflow-task{grid-template-columns:1fr auto;gap:6px 12px;padding:14px 16px}.workflow-task strong{grid-column:1/-1;font-size:18px}.workflow-owner::before{content:"Owner: "}.workflow-update{width:94%;padding:18px}.workflow-feedback{width:94%;padding:18px}.workflow-feedback::before{left:-15px;width:12px}.workflow-card-heading h3{font-size:16px}}